[JavaScript知识库]【axios简易封装使用】vue封装axios全局挂载使用

记录如何快速封装一个axios最简单的功能，然后全局挂载直接使用。

分三个简单的步骤：
前提：你下载了axios。如果没有下载的输入这个指令下载一下

npm install axios -s

第一步：

在utils文件夹内创建一个service.js组件把这一堆代码直接复制进去。

//axios实例封装

import axios from "axios";
//引入elementul的弹框提醒组件后面要用来报错
import { Message } from 'element-ui';
const service=axios.create({
    //基础路径URL配置
    baseURL:"http://localhost:8001",
    //五秒未响应提示
    timeout:5000,
})


//请求拦截
service.interceptors.request.use(config => {
    config.headers['token'] = Vue.cookie.get('token') // 请求头带上token，一般后端的请求都要带上token才能成功的，没有token会被判断未登录，这里根据个人不同改获取token的方式。不需要的直接删掉这行代码就行，其他不动
    return config
  }, error => {
    return Promise.reject(error)
  })
  

//响应拦截器
service.interceptors.response.use((response)=>{
    //只返回config内的data的数据，其他的不展示
    const res=response.data
    return res
},(error)=>{
    //如果请求出错会有弹框提示
        Message({
            type:"error",
            message:error.message
        })
        return Promise.reject(error)
})

export default service

第二步：

在utils中创建http.js组件把这代码复制进去。

/****   http.js   ****/
// 导入封装好的axios实例
import service from './service'

const http ={
    /**
     * methods: 请求
     * @param url 请求地址 
     * @param params 请求参数
     */
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return service(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return service(config)
    },
}
//导出
export default http

第三步：

在main.js文件内引入
这里是引入了封装后的请求，然后挂载到全局axios上，这样我们就可以直接this.$axios来发请求了

//把axios实例化后引入main.js文件。挂载在axios原型链上全局使用。
import http from "./utils/http";
Vue.prototype.$axios = http

最后：可以发请求了

格式是一样的，就换个get和post就行了，很简单

get请求

 this.$axios.get('/login', {
            username: 'admin',
            password: '123456',
        }).then(res => {
          console.log(res, '返回数据');
        }).catch(error => {
          console.log(error, '请求失败');
        })

post请求

 this.$axios.post('/login', {
            username: 'admin',
            password: '123456',
        }).then(res => {
          console.log(res, '返回数据');
        }).catch(error => {
          console.log(error, '请求失败');
        })

没有参数就不填第二个参数就行了

 this.$axios.post('/login').then(res => {
          console.log(res, '返回数据');
        }).catch(error => {
          console.log(error, '请求失败');
        })