1. utils/http.js

import axios from 'axios';
import qs from 'querystring'; Var instance = axios.create({timeout: 1000}); / / axios global configuration instance. Defaults. Headers. Post ['Content-Type'] = 'application/x-www-form-urlencoded';
instance.defaults.headers.common['Authorization'] = localStorage.getItem("token"); / / add request interceptor (post can only accept the string data type) the instance. The interceptors. Request. Use (function (config) {
    if (config.method === 'post') {
        config.data = qs.stringify(config.data)
    }
    return config;
}, function (error) {
    returnPromise.reject(error); }); / / add the response interceptor instance. Interceptors. Response. Use (/ / response contains the following information data, the status, statusText, headers, config (res) = > res. Status = = = 200 ? Promise.resolve(res) : Promise.reject(res), (err) => { console.log(err) const { response } = err; // console.log(response)if (response) {
            errorHandle(response.status, response.data);
            return Promise.reject(response);
        } else {
            console.log('Request failed')}}); const errorHandle = (status, other) => { switch (status) {case 400:
            console.log("Information verification failed");
            break;
        case 401:
            console.log("Authentication failed");
            break;
        case 403:
            console.log("Token verification failed");
            break;
        case 404:
            console.log("Requested resource does not exist");
            break;
        default:
            console.log(other);
            break; }}export default instance;
Copy the code

Network request interface

2. api/base.js

const base={
    baseUrl:'/api',
    chengpin:'/api/blueberrypai/getChengpinDetails.php',
    login:'/api/blueberrypai/login.php',
    music:"/sxtstu/music/baidu/list.php",
    login:'/api/login',
    list:'/api/list'
}
export default base;
Copy the code

3. api/api.js

import base from './base';
import axios from '.. /utils/http';
const api={
    getChengpin(params) {
        return axios.get(base.baseUrl+base.chengpin)
    },
    getLogin(params){
        return axios.post(base.baseUrl+base.login,params)
    },
    getMusic(params){
        returnAxios.get (baseUrl+base.music,{params:params})},return axios.post(base.baseUrl+base.login,params)
    },
    getList() {return axios.get(base.baseUrl+base.list)
    } 
}
export default api;
Copy the code

In the entry file, bind the API to the prototype of the VUE, making each component callable

Vue.prototype.$api=api
Copy the code

call

this.$api.getlogin ({username: 'Lisa',password:'123'})Copy the code