欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

有关axios的内容总结

程序员文章站 2022-04-11 12:08:32
...

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('没有可以取消的请求');
  }
}