(一)什么是axios

1. axios是基于Promise的HTTP库

2. 即可用于浏览器也可以用于node

var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
	var adapter;
    if (typeof XMLHttpRequest !== 'undefined') {
    	// 浏览器环境
        adapter = require('./adapter/xhr');
    } else if (typeof process !== 'undefined') {
    	// node环境
        adapter = require('./adapter/http');
    }
   return adapter;
}

  (二) axios的优点

1. 支持Promise API

2. 拦截请求和响应

3. 转换请求数据和响应数据

4. 取消请求

5.自动转换json数据

6. 客户端支持防御XSRF攻击

(三)五种axios的请求方法:

get、post、put、patch、delete

put/patch: 编辑、更新数据,区别如下~

put: 是要讲所有数据全部推送到后端 (一般用于更新)

patch: 只将修改的数据推送到后端

delete: 删除数据

3.1 post提交

    3.1.1 form-data (图片上传、表单提交)

    3.1.2 application/json (一般用这种)

(四)并发请求

并发请求:同时发送多个请求,并统一处理返回值 (比如渲染一个页面,刚开始同时调用多个接口)

(1)axios.all(), axios.spread()

all()里面是一个数组,数组里面放请求,如果接口都请求成功,才会触发.then

mounted () {
    axios.all([
      axios.get(url + '/city'),
      axios.get(url + '/card')
    ]).then(
      axios.spread((cityRes, cardRes) => {
        console.log(cityRes)
        console.log(cityRes)
      })
    )
  }

.all里面有多少个参数,.spread的箭头函数里面也应该有多少个参数,一一对应~

(五)axios的配置

5.1 全局配置 在main.js里面 (axios.defaults)

axios.defaults.timeout = 1000 // 设置全局超时时间
axios.defaults.baseUrl = 'localhost:8080' // 设置全局baseUrl

5.2 axios请求配置

 axios.get(url + '/city', {
      params: {}, // 参数
      timeout: 3000 // 配置
    }).then((res) => {
      console.log(res)
    })

 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐