Vue有关axios的请求封装以及调用

在前端项目中向后端请求数据是必不可少的

在Vue项目中axios是常用的请求封装组件，本文是关于axios的简单封装，以及调用

引入axios依赖包

npm install axios -save

创建request.js文件

//引入axios 
import axios from 'axios'
//引入token 为后续做请求判断做准备（可选）
import {getToken} from "@/utils/auth"

let baseURL;
// 判断开发环境（一般用于本地代理）
if (process.env.NODE_ENV === 'development') { // 开发环境
    baseURL = http://xxxxxxxxxx //后端地址
} else {
    // 编译环境
    if (process.env.type === 'test') {
        // 测试环境
        baseURL = http://xxxxxxxxxx // 后端地址
    } else {
        // 正式环境
        baseURL = http://xxxxxxxxxx
            // 后端地址
    }
}

const service=axios.create({
    baseURL:baseURL,//后端地址
    timeout:180000,//请求时限
    responseType:"json",//响应类型
    withCredentials:false,//跨域请求是否提供凭据信息
})
 
service.interceptors.request.use(//请求拦截
    config=>{
        // config.baseURL  //请求地址，可自行添加配置
        if(getToken()){ //如果token存在，在请求头中添加token（可选）
            config.headers['Authorization']=getToken()
        }
        config.header["Content-type"]='application-json';//请求体类型
        return config  //输出
    }
    error=>{ //如有报错，则抛出
        console.log(error)
        Promise.reject(error)
    }
)

service.interceptors.response.use( //响应拦截
    response=>{
        console.log(response) //打印请求结果
        //可在此处做请求响应拦截
        return response.data  //输出请求结果
    }
    error=>{ //如有报错则抛出
        console.log(error)
        Promise.reject(error)
    }
)

创建api.js

//引入请求封装
import request from '@/utils/request'   

export function login(data){
    return request({
        url:"/login", //请求接口
        method:'post',  // 请求方式
        data //请求体
    })
}

在页面引入登录login

import {login} from "@/api.js"  // 引入login登录方法


Login(){
    var  that = this ;
    let LoginForm={
        user:"user",
        password:"password"
    }
    login(LoginForm).then(res=>{ //调用方法
        console.log(res) //resquest.js  返回的请求结果
    })
}