axios的基本使用

axios基本配置

import axios from 'axios';
//引入axios
const request2  = axios.create({
//创建axios实例
baseURL:'https:/123',
//基地址
timeout:5000
//在5000毫秒内请求数据,如果没有请求成功就报错
})

后面的请求都会使用这个request2实例来发起请求。

使用axios发起get请求

//方法1
request2({
method:'get',
//请求方法
url:'/abc',
//请求地址
params:{a:1}
//get请求携带的数据
}).then((res)=>{console.log(res)})
//请求成功则输出res
.catch((err)=>{console.log(err)})
//请求失败则输出err

//方法2
request2.get('/abc').then((res)=>{console.log(res)})
.catch((err)=>{console.log(err)})

由于请求是用的前面定义过的axios实例，axios实例里定义了基地址，所以这里的地址只用写后面的就可以，发送的时候会自动让基地址和发送地址拼接在一起。例：https:/123/abc

使用axios发起post请求

request2({
method:'post',
//请求方法
url:'/abc',
//请求地址
data:{b:123}
//post请求携带的数据
}).then((res)=>{console.log(res)})
//请求成功则输出res
.catch((err)=>{console.log(err)})
//请求失败则输出err

axios请求拦截器

request2.interceptors.request.use((req) => {
//req是发送请求时的具体信息
  return req
}, (err) => { console.log(err) })
//err是报错的信息

请求拦截器会在所有请求发送之前，执行一遍回调函数。

由于这里使用的是request2注册的请求拦截器，所以这个请求拦截器只会在用request2发送请求时触发

axios响应拦截器

request2.interceptors.response.use((req) => {
//req是响应的具体信息
  return req
}, (err) => { console.log(err) })
//err是报错的信息

响应拦截器会在所有响应回来之后，执行一遍回调函数。