veu3Axios网络请求封装

创建一个utils包，在下面创建request.js,里面内容如例子1。

创建一个api,里面创建一个文件为path.js和index.js

用于分开请求地址如例子2;

参考文档：https://www.kancloud.cn/yunye/axios/234845

例子1：

import axios from "axios"

import querystring from "querystring"

//错误处理方案

const errorHandle=(status,info)=>{

switch(status){

case 400:

console.log("语义有误")；

break;

case 401:

console.log("服务器认证失败")；

break;

case 403:

console.log("服务器拒绝访问")；

break;

case 404:

console.log("地址错误")；

break;

case 500:

console.log("服务器遇到意外")；

break;

case 502:

console.log("服务器无响应")；

break;

default:

console.log(info)；

break;

}

}

const instance =axios.create({

timeout:5000

})

//拦截器一般

//发送数据之前

instance.interceptors.request.use(

config=>{

if（config.methods==="post"）{

config.data=querystring.stringify(config.data)

}

//包含着网络请求的所有信息

return config;

}

error=>{

return Promise.reject(error);

}

)

//获取数据之前

instance.interceptors.response.use(

response=>{

return response.status===200?Promise.resolve(response):Promise.reject(response)},

error=>{

const {response}=error;

//错误的处理才是我们需要最关注的

errorHandle(response.status,response.info);

}

)

export default instance;

例子2：

index.js:

import axios from "../utils/request"

import path from "./path"

const api={

getChengpin(){

return axios.get(path.baseUrl+path.chengpin)

}

}

export default api

path.js:

const base={

baseUrl:"https://baidu.com/",

chengpin:"/api/blueberrypai/www.php"

}

例子3：其他地方应用

<script>

import api from "../api/index"

export default{

name:'Helloworld',

props:{

msg:String

},

mounted(){

api.getchengpin().then(res=>{

console.log(res.data);

})

}

}

</script>