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代码块,进行错误处理。

 

 

posted @ 2020-09-10 14:31  ljygirl  阅读(191)  评论(0编辑  收藏  举报