有关axios的内容总结

axios特点

①基本promise的异步ajax请求库

②浏览器端/node端都可以使用

③支持请求/响应拦截器（函数）

④支持请求取消

⑤请求/响应数据转换

⑥批量发送多个请求

axios常用语法

axios(config) == axios.request(url[,config])

axios(url[,config])

axios.get(url[,config])

axios.post(url[,config])

axios.delete(url[,config])

axios.put(url[,config])

axios.defaults.xxx 请求默认全局配置

axios.interceptors.request.use() 添加请求拦截器

axios.interceptors.response.use() 添加响应拦截器

axios.create([config]) 创建一个新的axios

axios.all(promises):用于批量执行多个异步请求

axios.spread() 用来指定接收所有成功数据的回调函数的方法

Axios引入与请求

  <!-- 引入或者用npm -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

function get(){
    //axios.get('http://localhost:3000/post?id=1')
    axios({
        url:'/posts',
        param:{
            id:1
        }
    })
    .then(response => {
        console.log('/posts get',response.data)
    })
    .catch(error => {
        console.log('error',error.message)
    })
}

function post(){
   // axios.post('http://localhost:3000/post',{"title":"json-server3"})
    axios({
        url:'/post',
        methoda;'post',
        data:{"title":"json-server3"}
    })
    .then(response => {
        console.log('/posts post',response.data)
    })
}

function put(){   //更新	
   // axios.put('http://localhost:3000/post/3',{"title":"json-server3"})
    axios({
        url:'/post',
        methoda;'post',
        data:{"title":"json-server3"}
    })
    .then(response => {
        console.log('/posts post',response.data)
    })
}

function delete(){   //更新	
   // axios.delete('http://localhost:3000/post/3')
    axios({
        url:'/post/5',
        methoda;'delete',
    })
    .then(response => {
        console.log('/posts post',response.data)
    })
}

axios create(config)

根据指定配置创建一个新的axios，也就是每个新axios都有自己的配置

新axios知识没有取消请求和批量发请求的方法，其他所有的语法都是一致的。

为什么要设计这个语法？项目中有部分接口需要的配置与另一部分接口需要的配置不太一样，创建2个新axios，每个都有自己的配置，分别应用到不同要求的接口中

  const instance = axios.create({
      baseURL:'http://localhost:3000'
  })
  //使用Instance作为函数发请求发送请求
  instance({
      url:'/xxx',
      method:'post'
  })
  //使用Instance作为对象发请求发送请求
  instance.get('/xxx');

拦截器及运行流程

//添加请求拦截器(回调函数)
axios.interceptors.request.use(
  config =>{
    console.log('request interceptors1 onResolved()')
    return config //必须返回config
  },
  error =>{
    console.log('request interceptors1 onRejected()');
    return Promise.reject(error);
  })

//添加响应拦截器
  axios.interceptors.response.use(
  response =>{
    console.log('response interceptors2 onResolved()')
    return response
  },
  function(error){
    console.log('response interceptors2 onRejected()');
    return Promise.reject(error);
  })

请求拦截器是在发请求之前执行，响应拦截器也是在.then()之前进行相应。

请求拦截器是后添加先执行，响应拦截器是先添加先执行。

请求拦截器必须return config 如果不写的话串联后面的操作只能得到undefined 到最后会catch error

同理响应拦截器

取消请求

点击取消当前请求

//发送请求之后cancel是null还是函数
let cancel;
function get1(){
  axios({
    url:'/xxx',
    cancelToken:new axios.cancelToken((c)=>{  //c是用于取消当前请求的函数
      //保存取消的函数，用于之后可能需要取消当前请求
      cancel = c;
    })
  })
  .then(
  response =>{
    cancel = null;
    console.log('请求成功了');
  },
  error =>{
    cancel = null;
    console.log(error.message);
  }
)
}
//点击取消请求按钮之后判断cancel是否为Null
function cencelReq(){
  if (typeof cancel === 'function'){
    cancel('强制取消请求');
  }else{
    console.log('没有可以取消的请求');
  }
}