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': ''
                }
            }
        }
    }
})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LeeGaKi

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值