Vue封装网络请求

请求成功和请求失败

请求成功之后，获取结果的成功与失败

工作中网络请求的数据有很多，所以我们需要将网络请求封装
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;

2. src文件夹下创建api文件夹，api文件夹下创建base.js （存储全部请求路径）

 const base = {
	baseURL : "http://xxx",
	xx : "xxx"
	}
 export default base;

3. 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;

4. 组件引入并使用
   import api from '…/xxx；
   api.xx函数(无参|有参).then()…
   或者将api挂载到全局
   import api from ‘…/xxx’ ;
   Vue.prototype.$api = api ;
   this.$api.get | post(请求)