axios — Get Started

前言： axios 是基于promise的HTTP库，它有多种特性 ，想了解更多请看官网文档，这里我只介绍我做项目时使用到的一种特性:
我是Vue 框架实现一个多人共享博客平台，页面基本功能有登录、注册、注销、分辨页面是否在登录状态等功能，因此在利用Promise对象在底层二次封装一个请求和相应数据状态进行集中判断的axios，对外暴露register/login/longout/getInfo等方法，

1. 首先安装axios
   npm install axios --save
2. 在目录src中创建一个helpers目录，里面创建一个request.js 文件，内容为封装二次axios，只要import 引入或设置成windows属性，就可以在任何地方都可以调用request函数了

import axios from 'axios'  //文件中引入axios
import { Message } from 'element-ui'   //使用element-ui组件实现报错弹窗提示

//设置响应头
axios.defaults.headers.post['Content-Typr'] = 'application/x-www-form-rulencoded'
axios.defaults.baseURL =   'http://xxxx.com'
axios.defaults.withCredentials = true  //跨域请求时是否需要凭证

//导出request 函数
export default function request(url,tupe = 'GET',data={}){
     //返回一个promise对象
    return new Promise((resolve,reject) =>{
        //设置一个option对象
        let option:{
            url,
            method:type
        }
        /*
        if(type.tolowerCase() === 'get'){
            option.params = data
        }else{
            option.data = data
        }
        */
        axios(option).then(res =>{
            console.log(res)  //通常使用console.log方法看看代码有没有问题
            if(res.data.status === 'ok'){
                  resolve(res.data)
            }else{
                  Message.error(res.data.msg)
                  reject(res.data)
            }
        }).catch(err =>{
                Message.error('网络异常')
                reject({msg:'网络异常'})
          })
    })
} 

3.调用request函数，比如我在src/api目录下目录下创建了关于博客和登录相关的组件：auth.js　blog.js

 //用户相关的组件auth.js
import request from '@/helpers/request.js'

 const URl = {
   REGISTER: '/auth/register',
   LOGIN: '/auth/login',
   LOGOUT: '/auth/logout',
   GET_INFO: '/auth'
}

//暴露出一些函数
export default{
    register({username,password}){
        return request(URL.REGISTER,'POST',{username,password})
    },
    login({username,password}){
        return request(URL.LOGIN,'POST',{username,password})
    },
    logout(){
        return request(URL.LOGOUT)
    },
    getInfo() {
        return request(URL.GET_INFO)
    }
}

这这里暴露出的函数可以通过 vuex中的mapActions等属性可以获取到，比如src/login/template.js中可以这样写

import  { mapActions } from 'vuex'

export default{
    data(){
        return {
          
        }
    },
    methods:{
        ...mapActions(['login']) //获取上面组件中暴露出的方法

        //在事件中可以调用这些方法
        onLogin(){
               this.login({username: this.username, password: this.password})
                  .then(()=>{
                      this.$router.push({path: this.$route.query.redirect || '/'})
                  })
              }
        }
} 

src/api/blog.js的方法类似，后续的调用爆出来的方法也是类似的，当然也有很多种方法可以获取这些方法.

以上就是我理解的axios库.

遇到的问题及解决方法：就当做是个笔记吧，以免重蹈覆辙.

在项目目录下安装axios,进行封装后，在别处引入并调用request函数总是出错，如图所示：

image.png

我也不知道具体什么原因，反正是安装的依赖路径不对

输入以下几行命令重新安装就好了

rm -rf node_modules
npm install
npm install axios  --save