axios的介绍及使用

特点：支持promise API 、拦截请求和响应、转换请求数据和响应数据、取消请求、自动转换JSON数据、客户端支持防御XSRF等；

axios请求方法（需后端定义）：get获取数据、 post提交数据（用于表单提交和文件上传）、 patch更新（只将修改的数据推送到后端）、 put更新（所有数据都推送到后端）、 delete删除数据

例如：axios_test.vue:

<script>
  export default{
  name:'axios_test',
  components:{},
  created(){
      //get
      axios.get('/data.json',{params:{id:12,name:'zs'}}).then((res)=>{
          console.log(res);
      })
  或：axios({
          method:'get',
          url:'/data.json',
          params:{
              id:12,
              name:'zs'
          }
      }).then((res)=>{
          console.log(res);
      })
      //post
      axios.post('/xxx').then({
           // 默认application/json常用，用于没有上传文件时，用法同上不详写了
           // form-data 表单提交（用于文件上传）
          let data = { id:12}   
          let formData = new FormData()
          for(let key in data){
              formData.append(key,data[key]);
          }
          axios.post('post',formData).then(res=>{
              console.log(res)
          })
      })
      //put/patch
      axios.put('/put',data).then(res=>{
          console.log(res);
      })
      //delete
      axios.delete('/delete',{ params:{id:12}}).then(res=>{})    //实则底层调用get请求,params数据将添加到url中去；
      axios.delete('/delete',{ data:{id:12}}).then(res=>{})    //实则底层调用post请求，data数据将放在请求体中；
      //并发请求：同时进行多个请求，并统一处理返回值。  axios.all()和axios.spread()
      axios.all([
          axios.get('/data.json'),
          axios.get('/city.json')
      ]).then(
          axios.spread((dataRes,cityRes)=>{
              console.log(dataRes,cityRes);
          })
      )

      //创建axios实例
      let instance = axios.create({  //设置后会覆盖以前的设置
          baseURL:'http://localhost:8080',
          timeout:1000,
          url:'/data.json',
          method：'get/post/put/patch/delete',
          headers：{token:''},  //设置请求头
          params:{}, //请求参数拼接到url上
          data:{}  //请求参数放到请求体中
      })
      let instance2 = axios.create() 
      instance.get('/data.json').then(res=>{})
      //1、axios全局配置
        axios.defaults.timeout = 1000;
        axios.defaults.baseURL = 'http://localhost:8080'
      //2、axios实例配置（常用方式）
        let instance = axios.create()    //单独创建防止全局污染
        instance.defaults.timeout=3000  //单独设置防止覆盖其他设置
      //3、axios请求配置 (三种方式中优先级最高)
        instance.get('/data.json',{
           time:5000
        })

      //拦截器：在请求或响应被处理前拦截它们，分为请求拦截器和响应拦截器
        //请求拦截器
        axios.interceptors.request.use(config=>{
            //在发送请求前做些什么
            return config
          },err=>{
            //在请求发生错误时怎么处理
            return Promise.reject(err)
        })
        //响应拦截器
        axios.interceptors.response.use(config=>{
            //请求成功对响应数据做处理
            return res
          },err=>{
            //在响应发生错误时怎么处理
            return Promise.reject(err)
        })
        //取消拦截器（了解）
        let interceptor = axios.interceptors.request.use(config=>{
            config.headers={ auto:true}
            return config
        })
        axios.interceptors.request.eject(interceptor);
        //拦截器例子1:比如微博评论时需要先登录
        let instance = axios.create({})
        instance.interceptors.request.use(config=>{
            config.headers.token = '';
            return config
        })
        //拦截器例子2：移动端开发时的请求等待
        let instance_phone = axios.create({})
        instance_phone.interceptors.request.use(config=>{
            $('#modal').show()  // 请求等待弹窗
            return config
        })
        instance_phone.interceptors.response.use(res=>{
            $('#modal').hide()  // 请求等待弹窗隐藏
            return res
        })
      //错误处理  实际开发中，一般添加统一错误处理，特殊的单独添加。
        //添加请求错误处理拦截器
        let instance = axios.create({})
        instance.interceptors.request(config=>{
            return config
        },err=>{
          //请求错误 一般http状态码以4开头，常见：401超时，404 没找到
          $('#modal').show()
          setTimeout(()=>{
              $('#modal').hide()
          },2000)
            return Promise.reject(err)
        })
        //添加响应错误处理拦截器
        instance.interceptors.response(res=>{
            return res
        },err=>{
          //响应错误 一般http状态码以5开头，常见：500系统错误，502系统重启
          $('#modal').show()
          setTimeout(()=>{
              $('#modal').hide()
          },2000)
            return Promise.reject(err)
        })
        //添加特殊错误处理
        instance.get('/data.json').then(res=>{
            console.log(res)
        }).catch(err=>{
            console.log(err)
        })          
      //取消请求（了解）
        let source = axios.CancelToken.source()
        axios.get('data.json',{cancelToken:source.token}).then()
        source.cancel('cancel http')  //取消请求（message可选）
        比如当用户查询数据耗时太久，用户不再查询进行了其他操作时可能用到，一般用不到。
        
      }
    }
</script>

axios实战：移动端UI的vant使用和axios的封装：

①npm i vant
②npm i ts-import-plugin -D
③按照 API文档的快速上手提示，在 babel.config.js 中配置

    module.exports = {
        plugins: [
            ['import', {
               libraryName: 'vant',
               libraryDirectory: 'es',
               style: true
           }, 'vant']
        ]
    };

④ 引入 Vant 组件

test.vue:

<template>
   <van-button type="default">默认按钮</van-button> 
</template>
<script>
   import axios from 'axios'
   import {Button} from 'vant'
   export default {
     name:'showlist',
     components:{
       [Button.name]=Button   //局部注册，template模板中没有引用时可不写，vant官方格式。
     },
     created(){
       axios.get(./data.json).then((res)=>{
           console.log(res)
       })
     }
   }
</script>

⑤ router.js中添加一条路由：{path:'/showlist',name:'',component:()=>import('./views/showlist.vue')}
⑥ npm run serve 启动服务测试

axios的封装示例

①contactApi.js:

const CONTACT_API = {
 //获取联系人列表
 getContactList:{
   method:'get',
   url:'/contactList'
 },
 //新建联系人 form-data
 newContactForm:{
   method:'post',
   url:'/contact/new/form-data'
 },
 //新建联系人 application/json
 newContactJson:{
   method:'post',
   url:'/contact/new/json'
 },
 //编辑联系人
 editContact:{
   method:'put',
   url:'/contact/edit'
 },
 //删除联系人
 delContact:{
   method:'delete',
   url:'/contact'
 },
}
export default CONTACT_API 

②http.js:

import axios from 'axios'
import service from './contactApi.js'
import {Toast} from 'vant'
//service循环遍历，输出不同的请求方法
let instance = axios.create({
   baseURL:'http://localhost:9000/api',
   timeout:1000
})
const Http = {}; //存放请求方法的容器
for(let key in service){
   let api = service[key];  //url、method
   Http[key] = async function(
       params, //请求参数 
       isFormData = false, //标识是否是form-data请求
       config={} //配置参数
   ){                        
       let newParams = {}
       if(params && isFormData){
           newParams = new FormData()
           for(let i in params){
               newParams.append(i,params([i]))
           }
       }else{
           newParams = params
       }
       //不同请求的判断
       let response = {}; //请求的返回值
       if(api.method ==='put'|| api.method ==='post'||api.method==='patch'){
           try{ response = await instance[api.method](api.url,newParams,config)
           }catch(err){
               response = err
           }
       }else if(api.method ==='delete'||api.method==='get'){
           config.params = newParams
           try{ 
               response = await instance
               [api.method](api.url,config)
           }catch(err){
               response = err
           }
       }
       return response;
     }
 }
 //拦截器的添加
 instance.interceptors.request.use(config=>{
   Toast.loading({
     mask:false, //是否有阴影
     duration:0,  //一直存在
     forbidClick:true,  //禁止点击
     message:'加载中...'
   })
   return config
  },err=>{
   Toast.clear()
   Toast('请求错误，请稍后重试')
 })
 //响应拦截器
 instance.interceptors.response.use(res=>{
    Toast.clear()
    return res.data
 },()=>{
    Toast.clear()
    Toast('请求错误，请稍后重试')
 })
 export default Http

③main.js文件中引入http.js,并将其挂载到vue实例上，引入后添加如下：
 Vue.prototype.$http = Http;
④vue组件中使用:
<script>
   import axios from 'axios'
   import {Button} from 'vant'
   export default {
     name:'showlist',
     components:{
       [Button.name]=Button   //局部注册，template模板中没有引用时可不写。
     },
     methods:{
       //获取联系人列表
       async getList(){
         let res = await this.$http.getContact()
         this.list = res.data
       }
     }
     
   }
</script>

axios的介绍及使用

猜你喜欢