Необходимость в упаковке
Когда мы используем axios для асинхронных операций, мы можем столкнуться со следующими ситуациями:
- Частые нажатия на кнопку, отправка нескольких запросов
- В каноническом написании аксиом:
Здесь мы обнаруживаем, что каждый раз, когда мы пишем, нам нужно писать .catch(err=>{}), что вызовет избыточность в коде.axios.post(url, data).then(res=>{}).catch(err=>{})
Процесс инкапсуляции
Наука о перехватчиках
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
Научно-популярный метод обработки запроса на отмену
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
cancelToken: new CancelToken(function executor(c) {
// executor 函数接收一个 cancel 函数作为参数
cancel = c;
})
});
// 取消请求
cancel();
Код этой статьи
axios.js
Установите CancelFlag в качестве флага, по умолчанию это true, при запросе перехватчика оценивается, что если cancelFlag имеет значение true, запрос может быть отправлен, а для cancelFlag установлено значение false. Если значение cancelFlag равно false, запрос отменяется. Установите для CancelFlag значение true в перехватчике ответа. Описание Только после отправки запроса и получения ответа можно отправить другой запрос. Проблема здесь: CancelFlag — это глобальная переменная, поэтому, когда запрашиваются несколько страниц и несколько интерфейсов, они будут влиять друг на друга. lead to Занимает много памяти.
Ссылаясь на код, написанный коллегой (версия 2), я думаю, что это очень разумно. И относительно просто.
Версия 1. Используйте глобальную переменную cancelFlag для оценки
import Vue from 'vue'
import axios from 'axios'
import {Indicator} from 'mint-ui'
Vue.component(Indicator)
let CancelToken = axios.CancelToken //取消请求
let cancelFlag = true
//设置公共部分，请求头和超时时间
axios.defaults.headers = {
'X-Requested-With': 'XMLHttpRequest'
}
axios.defaults.timeout = 20000
//在请求拦截器时
axios.interceptors.request.use(config => {
if (cancelFlag) {
cancelFlag = false
Indicator.open()
} else {
cancelToken: new CancelToken (c => {
cancel = c
})
cancel()
}
return config
}, error => {
return Promise.reject(error)
})
axios.interceptors.response.use(config => {
cancelFlag = true
Indicator.close()
return config
}, error => {
//
})
Версия 2. При запрашивании асинхронно принесите параметр запроса.
Первоначальное сомнение здесь заключается в том, что когда request a принимает параметр requestName и отправляет несколько запросов, он будет отменен, когда будет установлено, что axios[requestName] и axios[requestName].cancel существуют. После успешной отправки, когда вы снова нажмете, axios[requestName] и axios[requestName].cancel все еще будут существовать. Это по-прежнему будет выполнять axios[requestName].cancel().
Это связано с тем, что при успешной отправке последнего запроса метод axios[requestName].cancel был признан недействительным, даже если этот метод будет выполнен, он не будет работать. Значение axios[requestName].cancel всегда является обратным вызовом отмены предыдущего запроса. Когда последний запрос был успешным, обратный вызов будет недействительным.
axios.interceptors.request.use(config => {
let requestName = config.data.requestName
if (requestName) {
if (axios[requestName] && axios[requestName].cancel) {
axios[requestName].cancel()
}
config.cancelToken = new CancelToken (c => {
axios[requestName] = {}
axios[requestName].cancel = c
})
}
return config
}, error => {
return Promise.reject(error)
})
Оболочка обработки ошибок ответа
axios.interceptors.response.use(config => {
Indicator.close()
return config
}, error => {
cancelFlag = true
Indicator.close()
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
error.message = '未授权，请重新登录'
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
break;
case 405:
error.message = '请求方法未允许'
break;
case 408:
error.message = '请求超时'
break;
case 500:
error.message = '服务器端出错'
break;
case 501:
error.message = '网络未实现'
break;
case 502:
error.message = '网络错误'
break;
case 503:
error.message = '服务不可用'
break;
case 504:
error.message = '网络超时'
break;
case 505:
error.message = 'http版本不支持该请求'
break;
default:
error.message = `连接错误${error.response.status}`
}
} else {
error.message = "连接到服务器失败"
}
return Promise.reject(error.message)
})
http.js (инкапсулирует запросы на отправку и получение)
В файле axios.js перехватчик ответов обрабатывается для оценки значения error.response.status, и возвращаются разные описания ошибок в соответствии с разными кодами состояния. В файле http.js параметров функций post и get три, а третий параметр error — копия при возникновении ошибки. С помощью этого апи вы можете задать копию самостоятельно, если не передать этот параметр, то вернуть копию ошибки, установленную axios.js
import Vue from 'vue'
import axios from './axios'
import 'mint-ui/lib/style.css';
import {Toast} from 'mint-ui'
Vue.component(Toast)
export function post (url, data, error) {
return new Promise((resolve, reject) => {
axios.post(url, data).then(res => {
resolve(res)
}, err => {
err = error ? error : err
Toast({
message: err,
duration: 500
})
})
})
}
export function get (url, data, error) {
return new Promise((resolve, reject) => {
axios.post(url, {
data: data
}).then(res => {
resolve(res)
}, err => {
err = error ? error : err
Toast({
message: err,
duration: 500
})
})
})
}
использовать
1) Вводим файл в main.js
import axios from '../utils/axios.js'
import {post, get} from '../utils/http.js'
Vue.prototype.$axios = axios
Vue.prototype.$post = post
Vue.prototype.$get = get
2) использование в компонентах
this.$post('/api/saveInfo', {
value: this.value,
requestName: 'name01'
}, '请求失败啦~~~').then(res => {
// alert(res.data)
})