本文已参与「新人创作礼」活动，一起开启掘金创作之路。
axios
安装
npm install --save axios
axios请求方法：get/post/put/patch/delete
get:获取数据
post:提交数据（表单提交/文件上传）
put/patch:更新数据，put是将所有的数据提交到后端；patch是只将修改的数据推送到后端
delete:删除数据
axios请求方法和别名
get
import axios from 'axios'
axios.get(url,{params:{id:12}}).then(res => console.log(res))
axios({method:'get',url:url,{params:{id:12}}}).then(res => console.log(res))
post/put/patch
let data = {id:12}
// Content-Type:application/json
axios.post(url,data).then(res => console.log(res))
axios({method:'post',url:url,data:data}).then(res => console.log(res))
// Content-Type:mutipart/form-data
let formData = new FormData()
for(let key in data){
formData.append(key,data[key])
}
axios.post(url,formData).then(res => console.log(res))
delete
// 把参数拼在url
axios.delete(url,{params:{id:12}}).then(res => console.log(res))
axios({method:'delete',url:url,params:data}).then(res => console.log(res))
// 把参数放在请求体
axios.delete(url,{data:{id:12}}).then(res => console.log(res))
并发请求
同时进行多个请求，并统一处理返回值
axios.all[axios,axios,...]
axios.spread是在axios.all多个请求完成的时候，把返回数据进行分割处理
axios.all([
axios.get('/data1')
axios.get('/data2')
]).then(
axios.spread((data1,data2) => {
console.log(data1,data2)
})
)
创建axios实例
后端接口地址有多个，并且超时时长不一样，可以在实例中配置两种参数，然后用实例去请求。
let instance = axios.create({
baseUrl:'http://localhost:8080',
timeout:1000
})
let instance2 = axios.create({
baseUrl:'http://localhost:3000',
timeout:5000
})
instance.get(url).then(() => {})
axios实例的常用相关配置
以下配置优先级从低到高
axios全局配置
axios.defaults.timeout = 1000
axios实例配置
let instance = axios.create({
baseUrl:'http://localhost:8080', // 请求的域名，基本地址
timeout:1000, // 请求超时时长
url:'/data',// 请求的路径
method:'get', //请求方法get/post/put/patch/delete
headers:{// 设置请求头
token:'', //登陆鉴权token识别当前登陆人的信息
},
params:{}, // 请求参数拼接在url
data:{}, // 请求参数放在请求体
})
axios请求配置
axios.get(url,{timeout:5000}})
拦截器
在请求或响应被处理之前拦截它们
// 请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求前做些什么
return config
},err => {
// 在请求错误的时候做些什么
return Promise.reject(err) // 请求没有到达后端
})
// 响应拦截器
axios.interceptors.request.use(res => {
// 请求成功对响应数据做处理
return res // 到达get方法的then回调里
},err => {
// 在响应错误的时候做些什么
return Promise.reject(err) // 到达get方法里的catch回调里
})
// 取消拦截器
let interceptors = axios.interceptors.request.use(config => {
config.header = {auth:true}
return config
})
axios.interceptors.request.eject(interceptors)
登陆
配置最好写在实例里，避免全局axios被污染
// 访问需要登陆的接口的axios实例
let instance = axios.create({})
instance.interceptors.request.use = config => {
config.headers.token = ''
return config
}
// 访问不需要登陆的接口的axios实例
let instance2 = axios.create({})
instance.interceptors.request.use = config => {
return config
}
// 移动端开发，提升用户体验度
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
}
错误处理
请求错误时，进行的处理。catch。实际开发中，一般统一添加错误处理，统一处理在实例上添加catch方法；某个接口的特殊处理，在方法上添加对应的catch方法
404 请求未找到
401 请求超时
400 参数错误
500 系统错误
502 系统重启
取消请求
用于取消正在进行的http请求，axios.CancelToken
CRM后台管理系统增删改查操作，涉及到大批量数据的处理，可能请求时间会比较长。若是用户等待时间比较长，改变查询意向的情况下，就可以用到这个取消请求
let source = axios.axios.CancelToken.source()
axios.get('/data.json',{
cancelToken:source.token // 添加取消请求token
})
.then(res => console.log(res))
.catch(err => console.log(res))
source.cancel('cancel http')
封装axios
// /service/contactApi.js
const CONTACT_API = {
getContactList:{
method:'get',
url:'/contactList'
},
newContactForm:{ // 新建联系人 form-data
method:'post',
url:'/contact/new/form'
},
newContactJSON:{ // 新建联系人 application/json
method:'post',
url:'/contact/new/json'
},
editContact:{// 编辑联系人
method:'put',
url:'/contact/edit'
},
delContact:{ // 删除联系人
method:'delete',
url:'/contact/delete'
}
}
export default CONTACT_API
// /service/http.js
import axios from 'axios'
import contactApi from './contactApi'
// contactApi循环遍历输出不同的请求方法
let instance = axios.create({
baseUrl:'http://localhost:9000/api',
timeout:1000
})
const Http = {} // 包裹请求方法的容器
// 请求格式/参数的统一
for(let key in contactApi){
let api = contactApi[key]
//params 请求参数，get/delete (url)，put/patch/post (data)
// isFormData 标识是否form-data请求
// config 请求配置参数
Http[key] = async function(
params,
isFormData = false,
config = {}
){
let url = api.url
let method = api.method
let newParams;
// 判断content-type是否是form-data
if(params && isFormData){
newParams = new FormData()
for(let key in params){
newParams.append(key,params[key])
}
}else{
newParams = params
}
let res = {};
if(method === 'put' || method === 'patch' || method === 'post'){
try{
res = await instance[method](url,newParams,config)
}catch(err){res = err}
}else if(method === 'get' || method === 'delete'){
try{
config.params = newParams
res = await instance[method](url,config)
}catch(err){res = err}
}
}
return res
}
// 拦截器的添加
instance.interceptors.request.use(config => {
// 发起请求前做些什么
Toast.loading({
mask:true,
duration:0, // 一直存在
forbidClick:true, // 禁止点击
message:'加载中...'
})
return config
},err => {
// 请求失败
Toast.clear()
Toast('请求错误，请稍后重试')
})
instance.interceptors.response.use(res => {
// 响应成功后做什么
Toast.clear()
return res.data
},err => {
// 响应失败
Toast.clear()
Toast('响应错误，请稍后重试')
})
export default Http;
// main.js
import Http from './service/http'
Vue.prototype.$Http = Http // 挂载Http到Vue实例上，这样不需要在每个文件里，都import了，全局可用$Http
<script>
methods:{
// 获取联系人列表
async getList(){
let res = await this.$Http.getContactList()
this.list = res.data
},
asynct save(){
let res = await this.$Http.newContactJSON(contactObj)
// let res = await this.$Http.newContactForm(contactObj,true)
if(res.code === 200){
Toast('新建成功')
this.showEdit = false
this.getList
}
}
}
</script>
