axios在vue中的使用

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


### React

*   介绍一下react

*   React单项数据流

*   react生命周期函数和react组件的生命周期

*   react和Vue的原理，区别，亮点，作用

*   reactJs的组件交流

*   有了解过react的虚拟DOM吗，虚拟DOM是怎么对比的呢

*   项目里用到了react，为什么要选择react，react有哪些好处

*   怎么获取真正的dom

*   选择react的原因

*   react的生命周期函数

*   setState之后的流程

*   react高阶组件知道吗？

*   React的jsx，函数式编程

*   react的组件是通过什么去判断是否刷新的

*   如何配置React-Router

*   路由的动态加载模块

*   Redux中间件是什么东西，接受几个参数

*   redux请求中间件如何处理并发



![](https://img-blog.csdnimg.cn/img_convert/9749ea39072fc4b7b27af6f3a4db5ab1.png)