axios.create(config)

axios.create(config)

可以使用自定义配置新建一个 axios 实例,对axios请求进行二次封装

1. 根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
2. 新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法都是一致

为什么要这种语法？

• 需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样
• 解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中

const instance = axios.create({
   baseURL:"http://localhost:3000"
})

// 使用instance发请求
instance({
    url:"/posts"
})

// 或
instance.get("/posts")

同时请求 多个端口号

const instance = axios.create({
    baseURL:"http://localhost:3000"
})

const instance2 = axios.create({
    baseURL:"http://localhost:4000"
})

// 同时请求 端口号 3000 4000

// 使用instance发请求
instance({
    url:"/posts"
})

// 使用instance2发请求
instance2({
    url:"/posts"
})

axios的处理链流程 拦截器

拦截器简单使用

// 添加请求拦截器
axios.interceptors.request.use(config=>{
    // config 请求配置
    
    // 可用于
    // 发送网络请求时，在界面显示一个请求的同步动画
    // 某些请求（比如登录（token））必须携带一些特殊的信息
    
    // 请求成功拦截
    console.log("请求拦截器")
    return config
},err=>{
    // 请求失败拦截
    return Promise.reject(err)
})  

// 添加响应拦截器
axios.interceptors.response.use(res=>{
    // res 响应结果
    // 响应拦成功拦截
    console.log("响应拦截器")
    return res
},err=>{
    // 响应拦失败拦截
    return Promise.reject(err)
})  

console.log("开始请求")
axios.get("http://localhost:3000/posts")
.then(res=>{
    console.log("res:",res)
    console.log("请求结束")
})

多个拦截器,请求拦截器后添加先执行

// 添加请求拦截器
axios.interceptors.request.use(config=>{
    console.log("请求拦截器")
    return config
},err=>{
    return Promise.reject(err)
})  

axios.interceptors.request.use(config=>{
    console.log("请求拦截器--------2")
    return config
},err=>{
    return Promise.reject(err)
})  

axios.interceptors.request.use(config=>{
    console.log("请求拦截器--------3")
    return config
},err=>{
    return Promise.reject(err)
})  


// 添加响应拦截器
axios.interceptors.response.use(res=>{
    console.log("响应拦截器")
    return res
},err=>{
    return Promise.reject(err)
})  

axios.interceptors.response.use(res=>{
    console.log("响应拦截器---------2")
    return res
},err=>{
    return Promise.reject(err)
}) 

axios.interceptors.response.use(res=>{
    console.log("响应拦截器----------3")
    return res
},err=>{
    return Promise.reject(err)
})

console.log("开始请求")
axios.get("http://localhost:3000/posts")
.then(res=>{
    console.log("res:",res)
    console.log("请求结束")
})

详情参考