须要先得有两个概念：

  1. 申请胜利和申请失败
  2. 申请胜利之后，获取后果的胜利与失败

因为工作中网络申请的数据有很多，所以咱们须要将网络申请封装

  1. 筹备工作：src文件夹下创立utils文件夹，在utils文件夹下创立request.js文件，接着上代码
//封装网络申请    import $axios from "axios"    import qs from "query-string"    // 错误信息的响应办法    const errorHandle = (status,other) => {            switch(status){                case 400:                // 申请头和服务器的限度                    console.log(" 服务器不了解申请的语法");                    break;                case 401:                    // token验证失败，用户身份验证失败                    console.log("（未受权） 申请要求身份验证");                    break;                case 403:                    // 用户身份过期了，服务器申请限度                    console.log("（禁止） 服务器拒绝请求");                    break;                case 404:                    // 网络申请地址谬误                    console.log("（未找到） 服务器找不到申请的网页。");                    break;                default:                    console.log(other);                    break;            }             }// 创立axios对象const instance = $axios.create({    timeout:5000  // 申请超时})// 全局配置instance.defaults.baseURL = 'http://iwenwiki.com';// instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 创立申请拦挡和响应拦挡操作instance.interceptors.request.use(config =>{        // 配置        if(config.method === 'post'){            config.data = qs.stringify(config.data);        }        return config;    },    error => Promise.reject(error))instance.interceptors.response.use(    // 胜利     /**     * 胜利和失败的判断：     *  1.申请胜利和申请失败     *  2.申请胜利：后果的胜利和后果的失败     */    response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),    error => {        const { response } = error; // ES6的解构赋值        /**         * response蕴含的信息：         *  status         *  data         */        // if(response){        //     // 给出开发者具体的错误信息        //     // errorHandle(response.status,response.data);        //     return Promise.reject(response);        // }else{        //     console.log("申请中断或者断网了");        // }                if(error){            errorHandle(error.status,error.data);            return Promise.reject(error);        }else{            console.log('申请中断那或者断网');        }            })export default instance;
  1. src文件夹下创立api文件夹，api文件夹下创立base.js （存储全副申请门路）
const base = {    baseURL : "http://xxx",    xx : "xxx"    } export default base;
  1. api文件夹下创立index.js (申请办法的对立解决 )
import $axios from '../utils/request'         import base from './base'               const api = {           xx函数(){                 //return  $axios.get|post(base.baseURL + base.xx)                 return  $axios.get|post(base.baseURL + base.xx,{                             params                         })                }        }          export default api;
  1. 组件引入并应用
    import api from '../xxx；
    api.xx函数(无参|有参).then()......
    或者将api挂载到全局
    import api from '../xxx' ;
    Vue.prototype.$api = api ;
    this.$api.get | post(申请)