axios---基本运用

数据请求方式

• get，获取数据
• post，提交数据（表单提交以及文件上传）
• put，更新数据 （提交所有的数据）
• patch，提交数据 （提交修改的数据）
• delete，删除数据

1.get方法的使用

params会出现在请求头中的querry string parameters中，并且会出现在浏览器的地址栏中，即会拼接到url中。有两种表达方式，代码如下：

// 第一种写法
axios({
    method: 'get',
    url: '',
    params: {}
}).then(res => { do something })

// 第二种写法
axios.get(url, params).then(res => { do something })

2. post方法的使用（put和patch用法类似）

post的请求头中会有一个content-type，该字段有两个值，一个为form-data，一般用于表单提交（文件上传，图片上传等等）；另一个是application/json即，传递的是json数据。如果需要传递的是form-data，那么我们需要先实例化一个FormData，然后将data指向form-data即可。有两种表达方式，代码如下：

// 第一种
axios({
    method: 'post',
    url: '',
    data: {}
}).then(res => { do something })

// 第二种
axios.post(url, data).then(res => { do something })

3. delete的使用方法

需要注意的是，config的第三个字段可以为params，这样参数会拼接在url中，如果我们不想使之出现在url中，我们只需要将params替换为data。代码如下：

axios({
    method: 'delete',
    url: '',
    params: {}
}).then(res => { do something })

4. 并发请求

同时进行多个请求，并统一处理返回值，如果在某些场景中我们需要同时依赖两个接口返回的数据，那么我们可以使用并发请求。主要用于我们需要同时处理多个接口的返回值的使用场景。代码如下：

axios.all([  // 这里的参数是一个数组，里面包含了axios请求
  axios.get('url1'), // 请求的先后顺序就是代码中的顺序
  axios.get('url2')
]).then(
  axios.spread((res1, res2) => { // spread用来分割返回值
    console.log(res1, res2)
  }
)

axios方法深入

1. 创建axios实例

有时我们后端的接口有很多，并且超时时长不一致，或者我们需要向不同的服务端去请求数据，这样我们就需要不同的axios实例去请求。代码如下：

// axios实例化
let api = axios.create({
    baseURL: 'localhost:8080', // 请求的域名
    timeout: 1000, // 设置请求的超时时长，超过时长报401超时
    method: 'get,post',
    headers: {  // 设置请求头
        token: ''  
    }, 
    params: {},
    data: {}
})
// 使用axios实例
api.get('/data.json')

2. axios配置

• 全局配置，例如axios.defaults.timeout = 1000
• 实例配置, 在创建axios实例时传入的配置，如果不传实例配置就会使用全局配置
• 请求配置，在使用axios请求时，可以单独传入新的配置

这三种配置的优先级为：请求配置 > 实例配置 > 全局配置

3. axios拦截器

请求拦截器：

axios.interceptors.request.use(
  config => {}, // 在发送请求前的一些处理逻辑
  err => {} // 在请求错误后的处理
)

响应拦截器：

axios.interceptors.response.use(
  res => { return res }, // 请求成功后对响应数据做一定的处理
  err => { return Promis.reject(err)} // 在响应错误后的处理，可以用catch捕捉
)

4. axios错误处理

一般来说，如果我们在调用接口时请求错误或者响应错误，程序处理流程都会进入到catch代码块中，例如：

axios.get('/data.json').then(callback).catch(err => {
    console.log(err)
})

但是在实际开发中，我们对大多数接口都采用统一的错误处理，除了某些特殊的接口会采用catch方法。

5. axios取消Http请求

取消请求一般发生在用户想查询某一商品或者某些信息，如果等待时间过长，用户可能会选择取消查询转而查询另一商品，这个时候上一个http请求就无用了，这时候我们会去取消上一个请求，具体方法如下：

let api = axios.create({})  // 实例化axios
let source = axios.CancelToken.source() // 实例化一个source对象

api.get('/data.json', { 
    cancelToken: source.token // 请求时携带cancleToken
}).then(callback).catch(err => {
    console.log(err)
})

source.cancel('message') // 调用source的cancel方法取消http请求，并将message以error
的形式返回，然后就取消了http请求，并进入到该请求的catch代码块，进行错误处理。