axios在vue中的使用

并引入axios : import axios from ‘axios’

二、axios方法的基本使用

==================

1. axios常用请求方法

---

（5种）get,post,put,patch,delete

get：获取数据（编辑）

post: 提交数据（表单提交+文件上传）

put: 更新数据 ( 所有数据推送到后端 )

patch: 更新数据（只将修改的数据推送到后端）

delete: 删除数据

post put patch很相似，都有两种数据格式：form-data，application

1）get

created() {

    /* get方法的两种写法 */

    axios.get('/data.json',{  // http://localhost:8080/data.json?id=12

        params:{

            id:12

        }

    }).then((res)=>{

      console.log(res)

    })

    axios({

        method:'get',

        url:'/data.json', /* 相对于index.html */

        params:{

            id:12

        }

    }).then(res => {

        console.log(res)

    })

  }

2）post

post三个参数：url路径，请求数据，config

请求数据的两种方法：

form-data 表单提交（图片文件上传）

application/json

 let data = {

      id:12

    }

    // application/json 两种写法

    axios.post('/post',data).then(res =>{

      console.log(res)  

    })   

    axios({

      method: 'post',

      url:'/post',

      data: data

    }).then(res =>{

      console.log(res)   

    })   

    // form-data

    let formData = new FormData()// 首先创建一个formData格式的数据

    for(let key in data){

      formData.append(key, data[key])  // 添加

    }

    axios.post('post',formData).then(res =>{

      console.log(res)  

    })   

3）put和patch

// put请求

    axios.put('/put',data).then(res=>{

      console.log(res)

    })

    // patch

    axios.put('/patch',data).then(res=>{

      console.log(res)

    })

  

4）delete

axios.delete('/delete', {   // 只有两个参数url,config

      params:{   // 在url上显示

        id: 12

      }

    }).then(res=>{

      console.log(res)

    })

    axios.delete('/delete', {   // 只有两个参数url,config

      data:{   // 不在url上传输

        id: 12

      }

    }).then(res=>{

      console.log(res)

    })

    axios({

      methos:'delete',

      url:'/delete',

      params:{},

      data:{}

    }).then(res=>{

      console.log(res)

    })

2. axios并发请求

---

使用场景：需要请求多个接口，同时处理返回值

axios.all()  参数是数组，里面是一个个ajax请求

axios.spread()  作用是在axios.all()多个请求完成之后，分割请求返回值，把返回数据进行处理

   axios.all(

       [

           axios.get('/data.json'),

           axios.get('/city.json')

       ]

   ).then( // 回调函数不同

       axios.spread((dataRes,cityRes)=>{

           console.log(dataRes,cityRes)

       })

   )

三、axios方法深入

===============

1. 创建axios实例

---

类似于数组创建的let arr = new Array()

后端接口地址有多个，并且超时试长不一样，用实例请求会很方便

    let instance = axios.create({  // axios实例

        baseURL: 'http://localhost:8080',

        timeout: 1000    

    })

    let axios2 = axios.create({  // axios实例

        baseURL: 'http://localhost:9090',

        timeout: 5000    

    })

    instance.get('/data.json').then(res=>{

        console.log(res)

    })

    axios2.get('/data.json').then(res=>{

        console.log(res)

    })

2. 实例相关配置

---

let instance = axios.create({  // axios实例

        baseURL: 'http://localhost:8080',  

                // 请求的域名/基本地址。会默认把baseurl拼接在相对路径前面

        timeout: 1000,       

                // 设置请求超时试长，单位：ms。超时会阻塞后端内容，因此设计超时时长会控制资源释放

        url: 'data.json',    // 请求的路径。

        method: 'get',     // post get patch put delete

        headers:{

            token:''   //  token识别登录人员信息，需要传递给后端

        },              // 设置请求头

        params: {},     // 会将请求参数拼接在url上

        data: {},       // 把请求参数放在请求体

    })

优先级：全局配置 < 实例配置 < 请求配置

// 1.axios全局配置

    axios.defaults.timeout = 1000

    axios.defulat.baseURL = 'http://localhost:8080'

// 2.axios实例配置

    let axios2 = axios.create()

    axios2.defaults.timeout = 3000

// 3.axios请求配置

    axios2.get('/data.json',{

        timeout: 9000

    }).then(res=>{

        console.log(res)

    })

3. 具体使用方法

---

有两种请求接口：http://localhost:9090 和 http://localhost:9091

    let real = axios.create({

        baseURL: 'http://localhost:9090',

        timeout: 1000, 

    })

    let real1 = axios.create({

        baseURL: 'http://localhost:9091',

        timeout: 3000, 

    })

    // 实例1请求使用到了：baseURL timeout url method(get) params

    real.get('/contactList',{

        params:{}

    }).then(res=>{

        console.log(res)

    })

    // 实例2请求使用到了：baseURL timeout(修改5000) url method(get) params

    real1.get('/orderList',{

        timeout: 5000

    }).then(res=>{

        console.log(res)

    })

4. axios拦截器

---

拦截器：在请求或者相应被处理前拦截它们

两种：请求拦截器，相应拦截器，取消拦截器（了解）

拦截器两个参数：请求前的拦截函数，请求错误的拦截函数

请求错误：请求没有到达后端（404接口未找到 401请求超时）

响应错误：查询数据，数据库查无此人

区别：请求是否到达后端

axios.interceptors.request.use(config=>{

        // 在发送请求前做些什么

        return config

    }, err=>{

        // 在发送请求错误时做些什么

        return Promise.reject(err)

    })



    // 响应拦截器

    axios.interceptors.response.use(res=>{

        // 请求成功对相应数据处理

        return res

    },err=>{

        // 相应错误做些什么

        return Promise.reject(err)

    })



    // 取消拦截器（了解）

    let inter = axios.interceptors.request.use(config=>{

        config.headers={

            auth: true

        }

        return config 

    })

    axios.interceptors.request.eject(inter)

5. axios错误处理

---

都会到catch函数

// 例子：实际开发过程中，一般需要添加统一的错误处理

    let instance = axios.create({})

    instance.interceptors.request(config=>{

        return config

    },err=>{

        // 请求错误 一般http状态码4，常见：401超时 404 not found

        $('#model').show()

        setTimeout(()=>{

            $('#model').hide()

        },2000)

        return  Promise.reject(err)

    })

    instance.interceptors.response.use(res=>{

        return res

    },err=>{

        // 响应错误 一般http状态码5，常见：500系统错误 502 系统重启

        return Promise.reject(err)

    })

    instance.get('./data.json').then(res=>{

        console.log(res)

    }).catch(err=>{

        console.log(err)

    })

6. axios取消请求

---

取消请求：取消正在进行的http请求（了解）

场景：3-5s还没有请求到，想要取消请求