axios学习和使用

网络请求的方式

  1. 传统的Ajax,基于XMLHttpRequest(不推荐)
    • 配置调用方式混乱(回调地狱)
  2. jQuery-Ajax (在vue开发中不推荐)
    • 相对于传统的Ajax非常好用
    • 但是jQuery的代码1w行,vue的代码1w行,在vue开发中,完全没有为了用网络请求就引用一个重量级的框架
  3. axios(推荐)
    • 在Vue-resource停止更新之后,axios是vue作者推荐的一款轻便的基于 promise 的 HTTP 库

认识Axios

  1. 可以理解为 ajax i/o system 的缩写
  2. 功能特点:
    • 在浏览器中发送 XMLHttpRequests 请求
    • 在 node.js 中发送 http请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求和响应数据
    • 。。。
  3. 支持多种请求方式:
    • axios(config)
    • axios.request(config)
    • axios.get(url[, config])
    • axios.delete(url[, config])
    • axios.head(url[, config])
    • axios.put(url[, data[, config]])
    • axios.patch(url[, data[, config]])

发送基本请求

  1.  **发送get请求演示**
     import axios from 'axios'
     export default {
       name:'app',
       created(){  //在vue的生命周期函数中
         //提问:为什么没有跨域的问题?
         //1.没有请求参数
         axios.get('http://123.207.32.32:8000/api/v1')
            .then(res=>{
            console.log(res);
           }).catch(err=>{
             console.log(err)
           })
    
         //2.有参数
         axios.get('http://123.207.32.32:8000/api/v1',
         {params:{type:'sell',page:1}})
         .then(res=>{
           console.log(res)
         }).catch(err=>{
           console.log(err)
         })
       }
     }
  2.   **发送并发请求**
      created(){ //在vue的生命周期函数中
        axios.all([axios.get('http://123.207.32.32:8000/api'),
                   axios.get('http://123.207.32.32:8000/api')],
                   {params:{type:'sell',page:1}})
                .then(axios.spread((res1,res2)=>{
                  console.log(res1);
                  console.log(res2);
                }))
      }

    全局配置

  3. 在开发中可能很多参数都是固定的,这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置
  4.  //提取全局的配置
     axios.defaults.baseURL = 'http://123.207.32.32:8000'
     //发送并请求
     axios.all([axios.get('/api'),
                axios.get('/home'),
                {params:{type:'sell',page:1}}])
             .then(axios.spread((res1,res2)={
               console.log(res1);
               console.log(res2);
             }))
  5. 常见的全局配置
    • 1.请求地址:url: ‘/user‘ ?? 2.请求类型:method: ‘get‘,
    • 3.请根路径:baseURL: ‘http://www.mt.com/api‘ ??4.请求前的数据处理:transformRequest:[function(data){}],
    • 5.请求后的数据处理:transformResponse: [function(data){}]?? 6.自定义的请求头:headers:{‘x-Requested-With‘:‘XMLHttpRequest‘},
    • 7.URL查询对象:params:{ id: 12 }?? 8.查询对象序列化函数:paramsSerializer: function(params){ }
    • 9.request body:data: { key: ‘aa‘}?? 10.超时设置s:timeout: 1000,
    • 11.跨域是否带Token:withCredentials: false?? 12.自定义请求处理:adapter: function(resolve, reject, config){},
    • 13.身份验证信息:auth: { uname: ‘‘, pwd: ‘12‘}?? 14.响应的数据格式 json / blob /document /arraybuffer / text / stream:responseType: ‘json‘,

axios的实例

  1. 为什么要创建axios的实例呢?
  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了.但是后续开发中, 某些配置可能会不太一样.
  • 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
  1.  //创建新的实例
     const axiosInstance =axios.create({
       baseURL:'http://123.207.32.32:8000',
       timeout:5000,
       headers:{
         'Content-Type':'application/x-www.from-urlencoded'
       }
     //发送网络请求
     axiosInstance({
       url:'/api',
       method:'get',
     }).then(res=>{
       console.log(res);
     }).catch(err=>{
       console.log(err);
     })
     })

    axios封装

  2.  //创建的axios文件中
     import originAxios from 'axios'
     export default function axios(option){
       return new Promise((resolve,reject)={
         //1.创建axios实例
         const instance = originAxios.create({
           baseURL:'/api',
           timeout:5000,
           headers:''
         });
    
         //2.传入的对象进行网络请求(optiond)
         instance(option).then(res=>{
           resolve(res);
         }).catch(err=>{
           reject(err);
         })
         //对第二步的简写(因为axios本身返回的就是一个Promise)
         //去掉export下面return Promise的那一行
         return instance(config)
       })
     }

Axios拦截器

  1. axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理
  2.  **请求拦截**
     instance.interceptors.request.use(config=>{
       console.log('来到了request拦截的success中')
       // 1.当发送网络请求时,在页面中添加了一个loading组件,作为动画
    
       // 2. 某些请求要求用户必须登陆,判断用户是否有token,如果没有token跳转到login页面
    
       // 3.对请求的参数进行序列化
       config.data =qs.stringify(config.data)
       console.log(config)
    
        //当拦截完了一定要记得将拦截返回
        return config
     })
    
     use()中还有一个err参数,表示请求错误后的拦截,请求拦截中错误拦截比较少,通常都是配置相关的拦截,可能的错误比如请求超时时,可以将页面跳转到一个错误的页面中
  3.    **响应拦截**
       响应的成功拦截中,主要是对数据进行过滤
     instance.interceptors.response.use(response=>{
       console.log("来到了response拦截success中");
       return response.data
       响应失败的拦截中,可以根据status判断报错的错误码,跳转到不同的错误提示页面
     },err => {
       console.log('来到了response拦截的failure中')
       if( err && err.response){
         switch(err.response.status){
           case 400:
             err.message = '请求错误',
             break;
           case 401:
             err.message = '未授权的访问',
             break;
         }
       }
       return err
     })

axios学习和使用

上一篇:java发送application/json格式的post请求,需要登陆


下一篇:盲盒软件APP开发 盲盒模式解析