Axios学习

title: Axios学习
date: 2022-11-10 07:59:53.626
updated: 2022-11-16 21:37:46.406

Axios是什么

• 是一个基于promise的HTTP库
• 可以用于浏览器和node.js

Axios和Ajax区别

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注： 传统Ajax 指的是 XMLHttpRequest（XHR），axios和jQuer ajax都是对Ajax的封装

Axios特性

• 支持Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御 XSRF

Axios浏览器支持

火狐、google、ie 8+

Axios基础用法（get、post、put等）

• get ：获取数据
• post：提交数据（表单提交、文件上传）
• put：更新数据（将所有数据全部推送至后端）
• patch：更新数据（只将修改的数据推送至后端）
• delete：删除数据

<script>
import axios from 'axios'
export default {
  name: 'axios2-2',
  components: {

  },
  created() {

    //1、get
    //http://localhost:8080/data.json?id=12
    axios.get('/data.json',{
      params:{
        id:12
      }
    }).then(resopnse =>{
      console.log(resopnse)
    })
    axios({
      method:'get',
      url:'/data.json',
      params:{
        id:12
      }
    }).then(response =>{
      console.log(response)
    })

    //application/json 大多数用这种
    let data ={
      id:12
    }
    axios.post('/post',data).then(response =>{
      console.log(response)
    })

    // 2、post
    //form-data 表单提交(图片上传、文件上传)
    let formData = new FormData()
    for (let key in data){
      formData.append(key,data[key])
    }
    axios.post('/post',formData).then(response =>{
      console.log(response)
    })
    axios({
      method:'post',
      url:'/post',
      data:data
    }).then(response =>{
      console.log(response)
    })

    // 3、put
    axios.put('/put',data).then(resopnse =>{
      console.log(resopnse)
    })

    // 4、patch
    axios.patch('/patch',data).then(resopnse =>{
      console.log(resopnse)
    })

    // 5、delete
    axios.delete('/delete',{
      params:{
        id:12
      }
    }).then(response=>{
      console.log(response)
    })

    axios.delete('/delete',{
      data:{
        id:12
      }
    }).then(response=>{
      console.log(response)
    })
    
    axios({
      method:'delete',
      url:'/delete',
      params:{
        id:12
      },
    }).then(resopnse=>{
      console.log(resopnse)
    })
  }
}
</script>

并发请求：同时进行多个接口请求，并统一处理返回值

axios.all(
    [
        axios.get('/data.json'),
        axios.get('/city.json')
    ]
).then(
    axios.spread((dataRes,cityRes) =>{
      console.log(dataRes,cityRes)
    })
)

Axios进阶用法（实例、配置、拦截器）

为什么要创建axios实例

后端接口地址有多个，并且超时时长不一样

    let instance = axios.create({
      baseURL:'http://localhost:8080',
      timeout:1000,

    })
    let axios2 = axios.create({
      baseURL:'http://localhost:9090',
      timeout:5000,
    })
    instance.get("/data.json").then(res =>{
      console.log(res)
    })

    axios2.get("/data.json").then(res =>{
      console.log(res)
    })

实例的相关配置

    axios.create({
      baseURL:'',//请求的域名
      timeout:1000,//请求超时时长
      url:'/data.json',//请求路径
      method:'get,post,put,patch,delete',//请求方法
      headers:{
        token:''
      },//设置请求头
      params:{},//请求参数拼接在url上
      data:{},//请求参数放在请求体内
    })
    
    // 优先级从低到高
    // 1、axios全局配置
    axios.defaults.timeout = 1000
    axios.defaults.baseURL = 'http://localhost:8080'
    // 2、axios实例配置
    let instance = axios.create({
      
    })
    instance.defaults.timeout = 3000
    // 3、axios请求配置
    instance.get('/data.json',{
      timeout:5000,
    })
    
    // 实际开发
    let instance1 = axios.create({
      baseURL:'http://localhost:9090',
      timeout:1000,
    })
    let instance2 = axios.create({
      baseURL:'http://localhost:9091',
      timeout:3000,
    })
    instance1.get('/contactList',{
      params:{}
    }).then(response=>{
      console.log(response)
    })
    instance2.get('/orderList',{
      timeout:5000
    }).then(response=>{
      console.log(response)
    })

axios拦截器：在请求或响应被处理前拦截他们

    // 拦截器：在请求或响应被处理前拦截他们
    // 请求拦截器
    axios.interceptors.request.use(
        config=>{
          //在发送请求前做些什么
          return config
        },error => {
          //在请求错误的时候做些什么
          return Promise.reject(error)
        }
    )
    // 响应拦截器
    axios.interceptors.response.use(
        res=>{
          //请求成功对响应数据做处理
          return res
        },error => {
          //响应错误做些什么
          return Promise.reject(error)
        }
    )
    // 取消拦截器（了解）
    let interceptors = axios.interceptors.request.use(
        config =>{
          config.headers={
            auth:true
          }
          return config
        }
    )
    axios.interceptors.request.eject(interceptors)

    //例子 登录状态（后端返回token:''，在具体功能比如评论时必须要登录）
    let instance = axios.create({})
    instance.interceptors.request.use(
        config =>{
          //直接复制
          config.headers.token = ''
          return config
        }
    )

axios错误处理

使用catch可以获取请求或者响应的错误信息

    // 实际开发中一般添加统一的错误处理
    let instance = axios.create({})
    instance.interceptors.request(
      config=>{
        return config
    },err=>{
        //请求错误一般为401超时 404not found
        //在这里加弹窗和setTimeout
        return Promise.reject(err)
    })

    instance.interceptors.response(
      res=>{
        return res
    },err=>{
        //请求错误一般为500系统错误 502系统重启
        //在这里加弹窗和setTimeout
        return Promise.reject(err)
    })

取消请求

商城中用户查询3-5秒都没结果换种查询方式

Axios进一步封装