2021-08-10封装axios

axios就是对ajax的封装

• 安装axios。。。。yarn add axios
• 发起一个get请求：

  import axios from 'axios'
  
  methods:{
     getFn(){
  
  
         //第一种写法
         axios({method:'get',url:'http://XXXX：8001/index/index'}).then(function(res){
               console.log(res)})
  
  
         //第二种写法
         axios.get('http://XXXXX:8001/index/index').then(function(){console.log(res)})
     }
  }

• 发起一个post请求：

• import axios from 'axios'
  
  methods:{
     getFn(){
  
  
         //第一种写法
         axios({method:'post',
                url:'http://XXXX：8001/auth/login',
                data:{
                  username:'王大爷',
                  pwd:'12321'
                }}).then(function(res){
               console.log(res)
                     })
  
  
  
         //第二种写法
         axios.post('http://XXXXX:8001/auth/login',{username:'王大 
                           爷',pwd:'12321'}).then(function(res)  
                           {console.log(res)
                           })
     }
  }

---

一般这样写的话就比较麻烦，需要在每个页面都写一次，所以接下来就用一个文件封装起来

• 新建一个文件request,request里再建两个文件（api.js。。。request.js）
• 在request.js里面搭建如下代码：

• //这份文件就是用来做拦截的
  
  import axios from 'axios'
  
  
  //创建一个单例或实例 
  const instance=axios.create({
        baseURL:'http://XXXX:8001',
        timeout:4000
  })
  
  
  //拦截器    请求拦截
  instance.interceptors.request.use(config=>{
      //部分代码需要拿到token
      let token=localStorge.getItem('token')
       if(token){
           config.headers={
              'aa-token':token
           }
       }
       return sonfig
  },err=>{
       return Promise.reject(err)
  })
  
  
  
  //拦截器    响应拦截
  instance.interceptors.request.use(res=>{
       return res;
  },err=>{
       return Promise.reject(err)
  })
  
  
  //整体导出
  export default instance

• 在api.js里面引入request.js：

• //讲request.js整体导入
  import request from './request.js'
  
  //按需导出每个请求，也就是按需导出每个api
  
  //请求首页数据,,get传递的参数，params需要解构
  export const GetHomeAPI=(params)=>request.get('/index/index',{params});
  
  
  //登录，，，
  export const PostLoginAPI=(params)=>request.get('/auth/login',params);

• 页面视图中使用的时候按需引入api：

• //按需引入
  import {GetHomeAPI,PostLoginAPI} from '../request/api.js'
  
  
  export default {
  
     methods:{ 
        getFn(){
  
            //get请求
            GetHomeAPI().then(res){
                console.log(res)
            }
  
            //post请求
            PostLoginAPI({
                username:'王大爷'，
                pwd:'12321'
            }).then(res){
                console.log(res)
            }
        }
     }
  
  }

@axios官方文档 http://www.axios-js.com/zh-cn/docs/