preface

Change begins with action. In vUE project development, we usually have some individual requirements for our requests, so we configure axios and wrap it accordingly.

1. Install AXIOS and import

NPM install axios: import axios from 'axios' : import axios from 'axios' : import axios from 'axios' : import axios from 'axios' Create index.js file insideCopy the code

2. Axios configuration

Index. Js writes

Import axios from 'axios' import {Qs} from 'Qs' const HTTP = axios.create({method: 'POST ', baseURL: process.env.vue_app_base_api,// The url prefix withCredentials: When the withCredentials function is enabled, the cookie can be accessed by the server. Timeout: 5000, headers: {//headers can be set to 'x-requested-with ': 'XMLHttpRequest',' content-type ': 'application/x-www-form-urlencoded; charset=UTF-8' } }); // Axios requests interception: HTTP. Interceptors. Request. Use (config = > {/ / / / usually dealing with the token of logic judgment localStorage and SessionStorage in presence of token for the corresponding processing // let token = localstorage.getitem ('mytoken'); // config.headers['Authorization'] = token; return config; }, err => { return Promise.reject(err); }); // axios response interception; http.interceptors.response.use(res => { return res; }, err => { return Promise.reject(err.data); }); export default http; /** * get method, * @param {String} url * @param {Object} params params) { return new Promise((resolve, reject) => { http.get(url, { params: params }).then(res => { res.data ? resolve(res.data) : resolve(res); })}); } /** * post method, * @param {String} url * @param {Object} params */ export function post(url, params) { return new Promise((resolve, reject) => { http.post(url, params).then(res => { res.data ? resolve(res.data) : resolve(res); })}); }Copy the code

3. Using HTTP

First, I have a homepage. vue page, so I create a homepage. js file in the views API folder to manage the requests for this page.

import http from './index' import { get, post } from './index'; import { stringify } from 'qs' const api = { home_api: (params) => http.post("/V2/wmsbase/carrier/list", stringify(params)),// Don't use get post to encapsulate stringify using home2_API: Params => get('/V2/wmsbase/carrier/list', params),// Use get post wrapper} export default API;Copy the code

HTTP requests in homepage.vue Are usually used in one of two ways in a Vue project. The following, depending on personal preference can be used.

Import HTTP from 'API /homePage'// import HTTP from' API /homePage'// Async requestApi() {let res = await http.home_api(); If (res.code == 200) {// logic}}, RequestApi2 () {home2_api(). Then (res => {if (res.code == 200) {// logic}})}},Copy the code

conclusion

Change begins with action. That’s it for axios configuration and encapsulation and usage. Next time we’ll show you how to configure vue project configuration and packaging Settings, request proxy, path mapping, and more in vue.config.js. See my open source project link for details. The AXIos wrapper, HTTP wrapper, and vue.config.js configuration are all configured on the project. Hope to bring you a little help.