метод запроса axios
В основном есть получить, опубликовать, поставить, исправить, удалить
-
get
получить данные
-
post
Отправить данные (отправка формы + загрузка файла)
-
put
Обновить данные (отправить все данные на сервер)
-
patch
Обновить данные (отправлять только измененные данные в серверную часть)
-
delete
удалить данные
получить метод
написание
тип вызова
axios.get('/data.json').then((res)=>{
console.log(res)
})
тип axios()
axios({
method:'get',
url:'/data.json'
}).then((res)=>{
console.log(res)
})
params
Если нам нужно загрузить:http://localhost:8080/data.json?id=12, как его получить?
тип вызова
axios.get('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
тип метода axios()
axios({
method:'get',
url:'/data.json',
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
почтовый метод
написание
тип вызова
axios.post('/post',{},config)
Метод post имеет три параметра: URL, данные и конфигурацию. Параметр конфигурации пока не обсуждается.
Обычно существует два типа загружаемых данных.
- отправка формы данных формы (загрузка изображения, загрузка файла)
- application/json
- Вышеупомянутые два типа данных можно просмотреть, войдя в сеть браузера, чтобы просмотреть тип содержимого в заголовке запроса после того, как запрос инициирован.
Предположим, теперь мы хотим загрузить данные:
let data = { id:12 }
Затем мы можем передать его напрямую:
axios.post('/post',data).then((res)=>{
console.log(res)
})
тип метода axios()
axios({
method:'post',
url:'/post',
data:data
}).then(...)
Мелкие детали обоих типов данных
Когда мы загружаем это общееlet data = { id:12 }Когда данные присутствуют, заголовок запроса сети будет отображаться как:application/json；charset=UTF-8
Когда мы загружаем это:
let data = {id:12}
let formData = new FormData()
for(let key in data){
formData.append(key,data[key])
}
Здесь данные преобразуются в формат, и формат изменяется на formdata.
Тогда заголовок запроса сети будет отображаться как:multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw
метод put и метод patch
Форма примерно такая же, как и у метода post, и сеть отображает толькоRequest Methodразные.
метод удаления
написание
метод удаления URL
//直接从url里面删除
axios.delete('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
Удаленный из URL-адреса, заголовок сетевого запроса будет отображаться как: Параметры строки запроса в конце
Метод удаления тела запроса
axios.delete('/data.json',{
data:{
id:12
}
}).then((res)=>{
console.log(res)
})
Удаленный из тела запроса, заголовок сетевого запроса будет отображаться как: Request Payload в конце
Методы удаления двух методов различны, и конкретное использование необходимо общаться с бэкэнда.
одновременные запросы
Введение
Несколько запросов выполняются одновременно, и возвращаемое значение обрабатывается единообразно.
Случай: предположим, что есть инструмент чата, в котором есть как ваша история чата, так и личная информация. На этом этапе необходимо вызвать два интерфейса для запроса данных. На этом этапе их возвращаемые значения должны обрабатываться единообразно.
Методы, предоставляемые axios: все, распространение
Метод axios.all принимает массив в качестве параметра, каждый элемент массива является запросом, возвращает объект обещания и выполняет метод then, когда все запросы в массиве выполнены. Метод axios.spread выполняется в методе then. Этот метод принимает функцию в качестве параметра и возвращает новую функцию. Полученные параметры Параметром функции является ответ, возвращаемый каждым запросом в методе axios.all.
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((acct, perms) => {
// 两个请求都完成后,acct是getUserAccount的返回值，同理，perms是 getUserPermissions的返回值
}));
Пример Axios. Введение
Зачем использовать пример?
Когда нам нужно использовать разные внутренние доменные имена, звоните напрямуюaxios.getНе слишком удобно. Мы можем вызвать его, создав экземпляр, и разные доменные имена будут соответствовать разным экземплярам один за другим.
Проявления
created() {
let instance = axios.create({
baseURL:'http://localhost:8080',//基本请求路径
timeout:1000,//超时设定
})
instance.get('/data.json').then(res=>{
console.log(res)
})
}
Основной метод настройки
baseURL:'http://localhost:8080',//请求的域名、基本地址
timeout:1000,//请求超时时长（ms）
url:'/data.json',//请求路径
method:'get，post，put，patch,delete',//请求方法
headers:{
token:''//代表当前登陆人的身份信息
},//设置请求头
params:{},//将请求参数拼接在url上，是一个对象
data:{}//将请求参数放在请求体里，是一个对象
Среди них параметры и данные представлены как объекты.
Сценарий использования обычно заключается в передаче параметров по пути при инициировании запроса:
//以get请求为例，get有两个配置，分别是相对路径和config
axios.get('/data.json',{
params:{
//参数
}
})
Способ настройки параметров
1. Глобальная конфигурация
axios.defaults.基本配置方法（baseurl等）
如：
axios.defaults.timeout = 1000 //全局配置请求时长1s
2. Конфигурация экземпляра
let instance = axios.create(
//基本配置方法
)
Если глобальный метод конфигурации установлен, но соответствующий метод не задан в конфигурации экземпляра, используется глобальный метод, в противном случае в качестве основного метода используется метод экземпляра.
3.Конфигурация запроса Axios
В зависимости от конкретной ситуации, если файл, который вызывает определенный путь, огромен, мы можем установить его продолжительность запроса отдельно:
instance.get('/data.json',{
timeout:5000
})
Суммировать
Приоритет: Конфигурация запроса > Конфигурация экземпляра > Глобальная конфигурация
перехватчик
Выполните некоторую обработку перед инициированием запроса и выполните некоторую обработку после инициирования запроса.
Делится на перехватчик запроса и перехватчик ответа.
перехватчик запросов
axios.interceptors.request.use(
config=>{
//在发送请求前做些什么
return config
},
err=>{
// 在请求错误的时候做些什么（此处错误，请求没有到后端）
return Promise.reject(err)//这里返回一个promise对象
}
)
перехватчик ответа
axios.interceptors.responce.use(
res=>{
//请求成功对响应数据进行处理
return res
},err=>{
//响应错误做些什么（此处错误，到达后端后返回）
return Promise.reject(err)
}
)
Оба они возвращают объект обещания после ответа на ошибку.Какова конкретная роль?
axios.get().then().catch(err=>{})
Этот фрагмент кода является стандартной формой, когда мы обычно отправляем запрос на получение, затем выполняется операция после успешного запроса, а функция catch используется для отлова ошибок.
После того, как мы перехватим ответ ранее, будь то запрос или перехватчик ответа, обещание, возвращенное их ошибкой, попадет в улов.
Отмените перехватчик (просто поймите)
let inerceptors = axios.interceptors.request.use
(config=>{
config.header = {
auth:true
}
return config
})
axios.inerceptors.request.eject(interceptors) //用axios全局去调用interceptors，这样就取消拦截了。。。
взять каштан
Контроль статуса входа через перехватчик
// 登陆状态,有token
let request = axios.create({})
request.interceptors.request.use
(config => {
config.headers.token = ''
return config
})
// 非登陆状态，无token
let request2 = axios.create({})
Те, у кого есть токены, могут получить больше доступа и больше данных, но не без токенов. Аналогично комментариям, требующим авторизации
обработка ошибок
Проявления
//首先设置拦截器
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(err) //所有错误处理都会进入此处
})
В конкретном практическом процессе нам необходимо создать единую обработку ошибок, а все типы ошибок поместить в перехват, что нам удобно использовать при последующем вызове интерфейса.
каштан
//创建一个请求实例
let instance = axios.create({})
//为请求实例添加请求拦截器
instance.interceptors.request.use(
config =>{
return config
},err =>{
//请求错误 一般http状态码以4开头，常见：401超时，404 not found 多为前端浏览器错误
return Promise.reject(err)
}
)
instance.interceptors.response.use(
res=>{
return res
},err =>{
//响应错误,一般http状态码以5开头，500系统错误，502系统重启等，偏向于服务端返回的报错
return Promise.reject(err)
}
)
//使用
instance.get('data').then(res=>{
console.log(res)
}).catch(err =>{
console.log(err)
})
отменить запрос
Он используется для отмены текущего HTTP-запроса. Используется редко и не будет представлен.