axios 二次封装_综合

认定了就要好好的珍惜对待，人生不容辜负，你必须要更加努力。加油骚年。

**在 src 下面创建 utils 目录里面创建一个 request.js 用与封装axios

先引入axios **import axios from 'axios'接下里封装const BASTURL=  process.env.VUE_APP_BASE_API==='production'? '':'/api';
const service = axios.create({
    baseURL: BASTURL, // url = base url + request urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 10000 // request timeout
})
//对上面的参数进行说明 // process.env.VUE_APP_BASE_API==='production'? '':'/api' 是判断当前的环境 如果是生产环境 看具体的请求 做不做处理 如果不是 那么后面的 /api 是为了跨域的 不需要可以不写 后面的 vue.config.js跨域会讲到 
// 在根目录的创建的 .env.development 文件，VUE_APP_BASE_API 是名称 ，process.env.VUE_APP_BASE_API 是获取开发环境的前缀地址 下面会讲解到
//再在根目录的创建一个 .env.production 文件，VUE_APP_BASE_API 是名称 ，process.env.VUE_APP_BASE_API 是获取生产环境的前缀地址 下面会讲解到
// withCredentials: true, 是请求携带cookie 不写 不会携带
// timeout: 10000 是请求时长10秒 //下面接着 添加请求头 具体看后端需要什么样的请求头 修改 Content-Type 就行
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';// 接下来就是 请求拦截器 
service.interceptors.request.use(config => {
    // const token = getToken()if(token){
    //把token 加到请求头里面去 具体问后端加到哪个变量中,这里是 随便加一个config.headers.post['X-Access-Token'] = token		}return config},error => {
    return Promise.reject(error)}
)// 接下来响应拦截器service.interceptors.response.use(response => {
    const res = response.dataif (res.code != '200') {
    // 问后台的一般返回的状态码 有哪几个 自己做拦截 如比下面的登陆过期等等的if (res.code === '50008' || res.code === '50012' || res.code === '50014') {
    // 登录过期 提示用户 并且跳转到登录页}return Promise.reject(new Error(res.message || 'Error'))} else {
    return res}},error => {
    return Promise.reject(error)}
)// 最后再导出 
export default service// 这里 axios 就封装完了

上面说道 process.env.VUE_APP_BASE_AP 直接再根目录创建 .env.development 里面直接这样写

VUE_APP_BASE_API = '后台地址'

.env.production 文件是一样·的，

最后一步再src目录下创建 api.js

// 第一步 引入 上面封装的axios 
import service '@/utils/request' // 接下来就是请求 比如 登录接口的请求 这样写 export function login(data) {
    return request({
    url: '/hfy/login',method: 'post',data})
}// 再页面中 直接引入这个api
import {
    login} from "@/api/api";// 请求调用 直接 login(登录传的参数).then((res) => {
    });

至此 axios 封装全部完成

这里补充一点如果如果请求出现跨域，后台没有解决，那么就需要我们前端来干了

// 在根目录创建 vue.config.js 目录 写下面的代码
module.exports = {
    devServer: {
    host: '192.168.0.104',port: 8081,autoOpenBrowser: false,errorOverlay: true,notifyOnErrors: true,poll: false,useEslint: true,showEslintErrorsInOverlay: false,devtool: 'eval-source-map',cacheBusting: true,cssSourceMap: false,proxy: {
      //配置跨域'/api': {
    target: 'http://121.121.67.254:8185/',  //这里后台的地址模拟的;应该填写你们真实的后台接口changOrigin: true,  //允许跨域pathRewrite: {
    /* 重写路径，当我们在浏览器中看到请求的地址为 http://localhost:8080/api/core/getData/userInfo 时实际上访问的地址是：http://121.121.67.254:8185/core/getData/userInfo,因为重 写了/api*/'^/api': '' }},}},
}

如有不足之处请指出来或联系邮箱 yuyong1663519276@163.com 谢谢