Axios如是说
1、Axios是甚么？
Axios是两个如前所述promise的HTTP库，近似于jQuery的ajax，用作http允诺。能应用作应用程序端和node.js，既能用作应用程序，也能用作node.js撰写的服务器端。
2、Axios优点
（1）全力支持Promise API
（2）截击允诺与积极响应，比如说：在允诺前加进许可和积极响应前做许多事。
（3）切换允诺统计数据和积极响应统计数据，比如说：展开允诺身份验证或是积极响应统计数据身份验证。
（4）中止允诺
（5）手动切换JSON统计数据
（6）应用程序全力支持防卫XSRF
3、应用程序全力支持情形
Firefox、Chrome、Safari、Opera、Edge、IE8+。
Axios基本上采用
yarn add axios
import axios from “axios”
axios.get(“/data.json”).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
关上控制面板瞅双眼，早已有统计数据了
Axios常见允诺方式
方式列举：get, post, put, patch, delete等。
推送到服务器端）delete：删除统计数据备注：post一般用作新建统计数据，put一般用作更新统计数据，patch一般用作统计数据量较大的时候的统计数据更新。
1、get方式
方式一
axios
.get(“/data.json”, {
params: {
id: 12
}
})
.then(res => {
console.log(res);
})
.catch(err => {
console.log(err);
});
方式二
axios({
method: “get”,
url: “/data.json”,
params:{
id:12
}
}).then(res => {
console.log(res);
});
带有参数后get允诺实际是http://xxxxx/data.json?id=12，写了这么多结果就是url加了参数。
应用程序控制面板相关信息如是说：
Request URL：允诺URLRequest Method：允诺方式2、post方式
post允诺常见的统计数据允诺格式有两种：
1.form-data（常见作表单提交（图片上传、文件上传））
let data = {
id: 12
};
let formData = new FormData();
for(let key in data){
formData.append(key,data[key])
}
console.log(formData)
axios.post(/data.json,formData).then(res=>{
console.log(res,formData)
})
注意：允诺地址Request URL: http://xxxxxxx/data.json，
允诺头中Content-Type: multipart/form-data; boundary=——WebKitFormBoundarydgohzXGsZdFwS16Y
参数形式：id:12
2.application/json（常见）
方式一
let data = {
id: 12
};
axios.post(“/data.json”, data).then(res=>{
console.log(res, post)
});
方式二
let data = {
id: 12
};
axios({
method:post,
url:/data.json,
data:data
}).then(res=>{
console.log(res)
})
注意：允诺地址Request URL: http://xxxxxxxx/data.json，
允诺头中Content-Type: application/json;charset=UTF-8
参数形式：{ id:12 }
3、put方式
let data = {
id: 12
};
axios.put(“/data.json”, data).then(res=>{
console.log(res, put)
});
4、patch方式
let data = {
id: 12
};
axios.patch(“/data.json”, data).then(res=>{
console.log(res, patch)
});
5、delete方式
方式一：params
axios
.delete(“/data.json”, {
params: {
id: 12
}
})
.then(res => {
console.log(res, “delete”);
});
let params = {
id: 12
};
axios({
method:delete,
url:/data.json,
params:params
}).then(res=>{
console.log(res)
})
方式二：data
axios
.delete(“/data.json”, {
data: {
id: 12
}
})
.then(res => {
console.log(res, “delete”);
});
let data = {
id: 12
};
axios({
method:delete,
url:/data.json,
data:data
}).then(res=>{
console.log(res)
})
注意：params方式会将允诺参数拼接在URL上面，Request URL:http://xxxxxxxx/data.json?id=12
参数形式：id:12
Content-Type: text/html; charset=utf-8
data方式不会讲参数拼接，是直接放置在允诺体中的，Request URL: http://xxxxxxxx/data.json
参数形式：{id:12}
Content-Type: application/json;charset=UTF-8
总结：上述方式中均对应两种写法：（1）采用别名：形如axios.get()；（2）不采用别名形如axios()；
6、并发允诺
并发允诺，就是同时展开多个允诺，并统一处理返回值。类似promise.all。
在下面例子中，我们采用axios.all，对data.json/city.json同时展开允诺，采用axios.spread，对返回的结果分别展开处理。代码如下：
// 并发允诺
axios.all([axios.get(“/data.json”), axios.get(“/city.json”)]).then(
axios.spread((dataRes, cityRes) => {
console.log(dataRes, cityRes);
})
);
注意：axios.all的参数是允诺函数的数组，在对应的回调then中，调用axios.spead对返回值展开处理，即可。
并发允诺的应用场景：需要同时展开多个允诺，并且需要同时处理接口调用的返回值的时候，我们能采用并发允诺。
Axio实例
1、axios实例的创建
比如说：后端接口地址有多个（http://www.test.com、http://www.example.com），并且超时时长不同（1000ms、2000ms），这个时候，我们能创建实例。
思路如下：创建多个实例，配置不同的超时时长，用不同的实例去允诺不同的接口。采用axios.acreate来创建实例，配置相关信息，展开网络允诺。代码如下：
// 实例1
let instance = axios.create({
baseURL:http://loacalhost:8080,
timeout:1000
})
instance.get(/data.json).then(res=>{
console.log(res)
})
//实例2
let instance2 = axios.create({
baseURL: “http://loacalhost:8081”,
timeout: 2000
});
instance2.get(“/city.json”).then(res => {
console.log(res);
});
备注：此时我们就能访问http://loacalhost:8080与http://loacalhost:8081两个不同域名的接口，并且采用不同的配置。
2、axios实例的相关配置
（1）配置列表
baseURL：允诺的域名（基本上地址）。
timeout：允诺的超时时长，超出后后端返回401。
备注：一般由后端定义，后端的接口需要的处理时长较长的时候，如果允诺的时间过长，后端处理不过来，就会阻塞，给服务器造成较大的压力。设置后，能及时释放掉。
url：允诺路径。
method：允诺方式。如：get、post、put、patch、delete等。
headers：允诺头。
params：将允诺参数拼接到url上
data：将允诺参数放置到允诺体里
axios.create({
baseURL:, //允诺的域名（基本上地址）
timeout:2000, //允诺的超时时长，单位毫秒，默认。
url:/data.json, //允诺路径
method:get, //允诺方式
headers:{
token:
}, //设置允诺头
params:{
},//将允诺参数拼接到url上
data:{
}, //将允诺参数放置到允诺体里
});
（2）三种配置方式
axios全局配置axios.defaults.baseURL = ‘http://localhost:8080‘
axios.defaults.timeout = 2000
axios实例配置let instance = axios.create();
instance.defaults.timeout = 3000
axios允诺配置instance.get(‘/data.json’,{
timeout:5000
})
优先级：axios全局配置 < axios实例配置 < axios允诺配置
3、常见参数配置的采用方式
举例1：
let instance1 = axios.create({
baseURL:http://localhost:9090,
timeout:1000
})
instance1.get(“/contactList”,{
params:{
id:10
}
}).then(res=>{
console.log(res)
})
分析：配置的参数为baseURL：‘http://localhost:9090’，timeout:1000，method:‘get’，params:{ id:10}，url:’/contactList’
举例2：
let instance2 = axios.create({
baseURL:http://localhost:9091,
timeout:3000
})
instance2.get(“/contactList”,{
timeout:5000
}).then(res=>{
console.log(res)
})
分析：配置的参数为baseURL：‘http://localhost:9091’，timeout:5000，method:‘get’，url:’/contactList’
注意：最终的有效配置是由优先级高的覆盖优先级低的。
Axios截击器、错误处理与中止允诺
1、截击器
甚么是截击器？
在允诺前或积极响应被处理前截击他们，分为两种：允诺截击器与积极响应截击器。
截击器的采用方式
允诺截击器
// 允诺截击器
axios.interceptors.request.use(config => {
// 在发送允诺前做些甚么
return config;
}, err=>{
// 在允诺错误的时候的逻辑处理
return Promise.reject(err)
});
积极响应截击器
// 积极响应截击器
axios.interceptors.response.use(res => {
// 在允诺成功后的统计数据处理
return res;
}, err=>{
// 在积极响应错误的时候的逻辑处理
return Promise.reject(err)
});
中止截击器
let inter = axios.interceptors.request.use(config=>{
config.header={
auth:true
}
return config
})
axios.interceptors.request.eject(inter)
实用举例A：登录权限
需要token的接口实例
let instance = axios.create({ });
instance.interceptors.request.use(config=>{
config.headers.token = ;
return config
})
不需要token的接口实例
let newInstance = axios.create({ });
实用举例B：移动端开发统计数据加载loading动画
// 允诺的加载动画loading
let instance_phone = axios.create({ });
instance_phone.interceptors.request.use(config=>{
$(#loading).show();
return config
})
instance_phone.interceptors.response.use(res=>{
$(#loading).hide();
return res
})
备注：实现的效果是允诺统计数据的时候显示loading动画，统计数据积极响应后隐藏loading动画。
2、错误处理，截击
结合允诺截击器与积极响应截击器来说，不管是允诺错误还是积极响应错误，都会执行catch方式。
// 允诺截击器
axios.interceptors.request.use(
config => {
// 在发送允诺前做些甚么
return config;
},
err => {
// 在允诺错误的时候的逻辑处理
return Promise.reject(err);
}
);
// 积极响应截击器
axios.interceptors.response.use(
res => {
// 在允诺成功后的统计数据处理
return res;
},
err => {
// 在积极响应错误的时候的逻辑处理
return Promise.reject(err);
}
);
axios
.get(“data.json”)
.then(res => {
console.log(res);
})
.catch(err => {
console.log(res);
});
错误处理举例
在实际开发中，不会再每次网络允诺的时候，采用catch方式，能加进统一的错误处理方式。代码如下：
// 允诺错误处理
let instance = axios.create({ });
instance.interceptors.request.use(
config => {
return config;
},
err => {
// 允诺错误的常见状态码：4XX 401-允诺超时 404-mot found
$(“#error”).show();
setTimeout(()=>{
$(“#error”).hide();
}, 2000)
return Promise.reject(err);
}
);
// 积极响应错误处理
instance.interceptors.response.use(
res => {
return res;
},
err => {
// 积极响应错误的常见状态码 5XX 500-服务器错误 502-服务器重启
$(“#error”).show();
setTimeout(()=>{
$(“#error”).hide();
}, 2000)
return Promise.reject(err);
}
);
instance.get(“/data.json”).then(res=>{
console.log(res,允诺成功)
}).catch(err=>{
console.log(err,除了截击器设置的处理之外的其他处理)
})
思路分析：首先创建实例，给实例设置允诺截击器与积极响应截击器。
（1）允诺错误的常见状态码以4开头，如401-允诺超时、404-接口未找到；（2）积极响应错误的常见状态码以5开头，如500-服务器错误、502-服务器重启等。（3）处理设置允诺截击器与积极响应截击器的操作外，如果还要其他操作，我们能在允诺的时候，在采用catch方式。3、中止允诺（不常见）
let source = axios.CancelToken.source();
axios
.get(“/data.json”, {
cancelToken: source.token
})
.then(res => {
console.log(res);
}).catch(err=>{
console.log(err)
})
// 中止允诺(参数msg)
source.cancel(自定的的字符串可选)
应用场景
axios允诺的封装与采用
思路分析
axios 允诺的封装，无非是为了方便代码管理，我们能采用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装两个方式，专门用作统计数据交互。
第一步：新建 src/service/contactApi.js 文件
const CONTACT_API = {
// 新建联系人 form-data
newContactForm:{
method:post,
url:/contact/new/form
},
// 新建联系人 application/json
newContactJson:{
method:post,
url:/contact/new/json
},
// 编辑联系人
editContact:{
method:put,
url:/contact/edit
},
// 删除联系人
delContact:{
method:delete,
url:/contact
}
}
export default CONTACT_API
备注：该文件的用途只有两个，定义不同的接口允诺信息（包含 method、url等）并导出采用。当接口增加或是删除的时候，只需要定义在该文件中即可。
第二步：新建 src/service/http.js 文件
import axios from axios
import service from ./contactApi
import { Toast } from vant
// service 循环遍历输出不同的允诺方式
let instance = axios.create({
baseURL: http://localhost:9000/api,
timeout: 1000
})
const Http = { }; // 包裹允诺方式的容器
// 允诺格式/参数的统一
for (let key in service) {
let api = service[key]; // url method
// async 作用：避免进入回调地狱
Http[key] = async function(
params, // 允诺参数 get：url，put，post，patch（data），delete：url
isFormData = false, // 标识是否是form-data允诺
config = { } // 配置参数
) {
let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
// 不同允诺的判断
let response = { }; // 允诺的返回值
if (api.method === put || api.method === post || api.method === patch) {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === delete || api.method === get) {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回积极响应值
}
}
// 截击器的加进
// 允诺截击器
instance.interceptors.request.use(config => {
// 发起允诺前做些甚么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: 加载中…
})
return config
}, () => {
// 允诺错误
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
// 积极响应截击器
instance.interceptors.response.use(res => {
// 允诺成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
export default Http
具体的思路步骤如下：
首先，我们引入contactApi.js文件，别名定义为 service。
import service from ./contactApi
定义新的 axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout允诺超时时间等等，区别于其他功能模块。
let instance = axios.create({
baseURL: http://localhost:9000/api,
timeout: 1000
})
定义 http 作为允诺方式的容器，配置对应的参数(即允诺方式中的其他信息，比如说 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：
let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
温馨提示：其中 isFormData 定义为 Boolean 变量，用作标识是否为 FormData 形式。
根据不同的允诺方式，发起网络允诺，并导出返回值。
// 不同允诺的判断
let response = { }; // 允诺的返回值
if (api.method === put || api.method === post || api.method === patch) {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === delete || api.method === get) {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回积极响应值
注意：对于不同方式的区别在于：get 与 delete 的参数在 config 中配置，而不是采用 params 。
设置允诺截击器与积极响应截击器
/ 截击器的加进
// 允诺截击器
instance.interceptors.request.use(config => {
// 发起允诺前做些甚么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: 加载中…
})
return config
}, () => {
// 允诺错误
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
// 积极响应截击器
instance.interceptors.response.use(res => {
// 允诺成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast(允诺错误，请求稍后重试)
})
导出src/service/http.js文件，用作其他地方的引入。
export default Http
第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。
import Http from ./service/http
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http
第四步：在组件中采用封装的允诺
this.list = res.data
},
注意：在采用的时候，我们需要结合 async 与 await 才能正确采用。具体的采用方式是：
在定义的网络允诺函数前增加 async 标识。在接收允诺返回统计数据的时候，增加 await 标识。提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。axios在提交表单允诺时会手动设置content-type，此时手动设置时无效的。总结
在展开项目开发的时候，我们需要对网络允诺的方式展开封装，能有效地减少后期代码维护的难度，建议开发者根据不同的功能模块展开拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。
axios允诺的封装与采用
思路分析
axios 允诺的封装，无非是为了方便代码管理，我们能采用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装两个方式，专门用作统计数据交互。
第一步：新建 src/service/contactApi.js 文件
const CONTACT_A },
// 新建联系人 form-data
newContactForm:{
method:post,
url:/contact/new/form
},
// 新建联系人 application/json
newContactJson:{
method:post,
url:/contact/new/json
},
// 编辑联系人
editContact:{
method:put,
url:/contact/edit
},
// 删除联系人
delContact:{
method:delete,
url:/contact
}
}
export default CONTACT_API
备注：该文件的用途只有两个，定义不同的接口允诺信息（包含 method、url等）并导出采用。当接口增加或是删除的时候，只需要定义在该文件中即可。
第二步：新建 src/service/http.js 文件
import axios from axios
import service from ./contactApi
import { Toast } from vant
// service 循环遍历输出不同的允诺方式
let instance = axios.create({
baseURL: http://localhost:9000/api,
timeout: 1000
})
const Http = { }; // 包裹允诺方式的容器
// 允诺格式/参数的统一
for (let key in service) {
let api = service[key]; // url method
// async 作用：避免进入回调地狱
Http[key] = async function(
params, // 允诺参数 get：url，put，post，patch（data），delete：url
isFormData = false, // 标识是否是form-data允诺
config = { } // 配置参数
) {
let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
// 不同允诺的判断
let response = { }; // 允诺的返回值
if (api.method === put || api.method === post || api.method === patch) {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === delete || api.method === get) {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回积极响应值
}
}
// 截击器的加进
// 允诺截击器
instance.interceptors.request.use(config => {
// 发起允诺前做些甚么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: 加载中…
})
return config
}, () => {
// 允诺错误
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
// 积极响应截击器
instance.interceptors.response.use(res => {
// 允诺成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
export default Http
具体的思路步骤如下：
首先，我们引入contactApi.js文件，别名定义为 service。
import service from ./contactApi
定义新的 axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout允诺超时时间等等，区别于其他功能模块。
let instance = axios.create({
baseURL: http://localhost:9000/api,
timeout: 1000
})
定义 http 作为允诺方式的容器，配置对应的参数(即允诺方式中的其他信息，比如说 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：
let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
温馨提示：其中 isFormData 定义为 Boolean 变量，用作标识是否为 FormData 形式。
根据不同的允诺方式，发起网络允诺，并导出返回值。
// 不同允诺的判断
let response = { }; // 允诺的返回值
if (api.method === put || api.method === post || api.method === patch) {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === delete || api.method === get) {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回积极响应值
注意：对于不同方式的区别在于：get 与 delete 的参数在 config 中配置，而不是采用 params 。
设置允诺截击器与积极响应截击器
/ 截击器的加进
// 允诺截击器
instance.interceptors.request.use(config => {
// 发起允诺前做些甚么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: 加载中…
})
return config
}, () => {
// 允诺错误
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
// 积极响应截击器
instance.interceptors.response.use(res => {
// 允诺成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
导出src/service/http.js文件，用作其他地方的引入。
export default Http
第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。
import Http from ./service/http
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http
第四步：在组件中采用封装的允诺
.getContactList()
this.list = res.data
},
注意：在采用的时候，我们需要结合 async 与 await 才能正确采用。具体的采用方式是：
在定义的网络允诺函数前增加 async 标识。在接收允诺返回统计数据的时候，增加 await 标识。提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。axios在提交表单允诺时会手动设置content-type，此时手动设置时无效的。总结
在展开项目开发的时候，我们需要对网络允诺的方式展开封装，能有效地减少后期代码维护的难度，建议开发者根据不同的功能模块展开拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。
axios允诺的封装与采用
思路分析
axios 允诺的封装，无非是为了方便代码管理，我们能采用抽离拆分的思想，将不同功能模块的接口处理成不同的模块，然后封装两个方式，专门用作统计数据交互。
第一步：新建 src/service/contactApi.js 文件
/contactList
},
// 新建联系人 form-data
newContactForm:{
method:post,
url:/contact/new/form
},
// 新建联系人 application/json
newContactJson:{
method:post,
url:/contact/new/json
},
// 编辑联系人
editContact:{
method:put,
url:/contact/edit
},
// 删除联系人
delContact:{
method:delete,
url:/contact
}
}
export default CONTACT_API
备注：该文件的用途只有两个，定义不同的接口允诺信息（包含 method、url等）并导出采用。当接口增加或是删除的时候，只需要定义在该文件中即可。
第二步：新建 src/service/http.js 文件
import axios from axios
import service from ./contactApi
import { Toast } from vant
// service 循环遍历输出不同的允诺方式
let instance = axios.create({
baseURL: http://localhost:9000/api,
timeout: 1000
})
const Http = { }; // 包裹允诺方式的容器
// 允诺格式/参数的统一
for (let key in service) {
let api = service[key]; // url method
// async 作用：避免进入回调地狱
Http[key] = async function(
params, // 允诺参数 get：url，put，post，patch（data），delete：url
isFormData = false, // 标识是否是form-data允诺
config = { } // 配置参数
) {
let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
// 不同允诺的判断
let response = { }; // 允诺的返回值
if (api.method === put || api.method === post || api.method === patch) {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === delete || api.method === get) {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回积极响应值
}
}
// 截击器的加进
// 允诺截击器
instance.interceptors.request.use(config => {
// 发起允诺前做些甚么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: 加载中…
})
return config
}, () => {
// 允诺错误
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
// 积极响应截击器
instance.interceptors.response.use(res => {
// 允诺成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
export default Http
具体的思路步骤如下：
首先，我们引入contactApi.js文件，别名定义为 service。
import service from ./contactApi
定义新的 axios 实例，针对当前功能模块联系人列表管理 contactList ，配置baseURL基础域名、timeout允诺超时时间等等，区别于其他功能模块。
let instance = axios.create({
baseURL: http://localhost:9000/api,
timeout: 1000
})
定义 http 作为允诺方式的容器，配置对应的参数(即允诺方式中的其他信息，比如说 headers，content-type，token等等)。需要注意的是，在其中我们要区分 content-type的形式有两种：form-data 与 application/json，它们的参数配置不同，form-data 形式的参数，我们需要定义 Formdata 对象。具体如下：
let newParams = { }
// content-type是否是form-data的判断
if (params && isFormData) {
newParams = new FormData()
for (let i in params) {
newParams.append(i, params[i])
}
} else {
newParams = params
}
温馨提示：其中 isFormData 定义为 Boolean 变量，用作标识是否为 FormData 形式。
根据不同的允诺方式，发起网络允诺，并导出返回值。
// 不同允诺的判断
let response = { }; // 允诺的返回值
if (api.method === put || api.method === post || api.method === patch) {
try {
response = await instance[api.method](api.url, newParams, config)
} catch (err) {
response = err
}
} else if (api.method === delete || api.method === get) {
config.params = newParams
try {
response = await instance[api.method](api.url, config)
} catch (err) {
response = err
}
}
return response; // 返回积极响应值
注意：对于不同方式的区别在于：get 与 delete 的参数在 config 中配置，而不是采用 params 。
设置允诺截击器与积极响应截击器
/ 截击器的加进
// 允诺截击器
instance.interceptors.request.use(config => {
// 发起允诺前做些甚么
Toast.loading({
mask: false,
duration: 0, // 一直存在
forbidClick: true, // 禁止点击
message: 加载中…
})
return config
}, () => {
// 允诺错误
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
// 积极响应截击器
instance.interceptors.response.use(res => {
// 允诺成功
Toast.clear()
return res.data
}, () => {
Toast.clear()
Toast(允诺错误，允诺稍后重试)
})
导出src/service/http.js文件，用作其他地方的引入。
export default Http
第三步：在入口文件中导入 http.js ，并挂载到 vue 原型上。
import Http from ./service/http
// 把Http挂载到Vue实例上
Vue.prototype.$Http = Http
第四步：在组件中采用封装的允诺
= await this.$Http.getContactList()
this.list = res.data
},
注意：在采用的时候，我们需要结合 async 与 await 才能正确采用。具体的采用方式是：
在定义的网络允诺函数前增加 async 标识。在接收允诺返回统计数据的时候，增加 await 标识。提示：在上面函数中，只有在 res 拿到后才会执行 this.list = res.data; 相当于在对应的 then 中执行的语句，避免了回调地狱。axios在提交表单允诺时会手动设置content-type，此时手动设置时无效的。总结
在展开项目开发的时候，我们需要对网络允诺的方式展开封装，能有效地减少后期代码维护的难度，建议开发者根据不同的功能模块展开拆分，方便后期代码问题的定位。另外，也能实现代码的低耦合，避免出现更多的重复代码。
