Vue项目前期准备工作

一.公共处理请求的响应内容

一般情况下发送请求，后端都会传过来json数据，其中为公共返回类的样式返回内容，分为code状态码、message消息信息、data返回数据。

假如每一次发送请求都去处理返回信息 太麻烦，我们创建一个拦截器对返回信息进行统一操作。

其中的数据不做处理返回给前端做处理。

1.首先我们创建utils目录下的api.js

2.引入axios工具 和element-ui的返回消息组件

 3.拦截器的编写

axios.interceptors.response.use(success=>{
    //业务逻辑错误 success不是后端接口返回的数据串 而是浏览器的
    //说明掉到接口了 http标准状态码200  但是逻辑是否200不确定
    if(success.status&&success.status===200){
        //掉到接口了但是逻辑不对 响应给页面后台传过来的message
        if(success.data.code!==200){
            Message.error({message:success.data.message})
            return;
        }
        //成功后返回给客户端成功的消息(后端的)
        if (success.data.message){
            Message.success({message:success.data.message})
        }
        //拦截器拦截到的请求都是成功的就将数据继续传递下去
        //事实上拦截器就帮助前端处理了后端传来的message
        return success.data;
    }
},error => {
    //可能服务器崩了error不是后端接口返回的数据串 而error.response.data是浏览器的
    if(error.response.code!==200){
        Message.error({message:"接口被吃了"+error.response.data.message})
        router.replace("/").then(r => console.log(r))
    }
});

success.data 

 success.status  此为浏览器标准状态码

Error

error.code不存在

error.status是错误的标准浏览器状态码

error.response如下

 error.response.data是返回的公共类

二.4种类型请求的封装和全局处理

每一次去调用axios的异步请求都需要书写相同的格式，我们将四种请求封装好，进行全局配置，

只需当插件调用 避免重复代码。

1.同样是在api.js中

2.编写代码如下。

//万一添加前置路径 可变更
let base = '';
//封装请求
export const postRequest=(url,parmes)=>{
    return axios({
        method:"post",
        url:`${base}${url}`,
        data: parmes
    })
}

// 传送json的put请求
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}
// 传送json的get请求
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}
// 传送json的delete请求
export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params
    })
}

3.全局处理

将组件导入到main.js中 

 代码如下

import { postRequest, putRequest, getRequest, deleteRequest } from './utils/api'

// 插件形式使用请求
Vue.prototype.postRequest = postRequest
Vue.prototype.putRequest = putRequest
Vue.prototype.getRequest = getRequest
Vue.prototype.deleteRequest = deleteRequest

4.调用举例

三.跨域代理的书写 

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            "/api": {
                target: 'http://www.lijiaqi.icu:8081', // 对应的代理地址
                //重写路径 替换规则
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }
})