乐趣区

关于vue.js:Vue封装Axios网络请求

jiezi

须要先得有两个概念：

  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(申请)
退出移动版