Vue封装网络请求

最新推荐文章于 2024-07-28 22:04:33 发布

选择跳水或自由落体

最新推荐文章于 2024-07-28 22:04:33 发布

阅读量3k

点赞数 3

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42244911/article/details/115246860

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文档介绍了如何在前端项目中进行网络请求的封装，包括创建http.js文件用于axios的配置，设置请求和响应拦截器处理token及异常情况，如401未授权时的重新登录操作。同时，展示了在组件中如何调用这些封装好的网络请求方法。

摘要由CSDN通过智能技术生成

工作中网络请求的数据有很多，所以我们需要将网络请求封装

准备工作：src文件夹下创建utils文件夹，在utils文件夹下创建http.js文件用于封装网络请求baseUrl.js处理根路径


//根路径的处理
const baseUrl = "http://localhost:3300"

export default baseUrl

/**
 * cors
 * proxy:开发环境
 */

2.在utils文件夹下创建http.js文件用于封装网络请求

import axios from 'axios'  
import store from '@/store/index.js'
import baseURL from './baseURL'
import {
    Message
} from 'element-ui' //ElementUI 消息提示组件Message
const http = {}


//axios.create()是添加了自定义配置的新的axios
var instance = axios.create({
    timeout: 5000
    // baseURL
})

// 添加请求拦截器
instance.interceptors.request.use(
    function (config) {
        // 请求头添加token
        if (store.state.UserToken) {
            config.headers.Authorization = store.state.UserToken
        }
        return config
    },
    function (error) {
        //romise.reject(reason)方法返回一个带有拒绝原因（reason参数）的Promise对象。
        return Promise.reject(error)
    }
)

// 响应拦截器即异常处理
instance.interceptors.response.use(
    response => {
        return response.data
    },
    err => {
        if (err && err.response) {
            switch (err.response.status) {
                case 400:
                    err.message = '请求出错'
                    break
                case 401:
                    Message.warning({
                        message: '授权失败，请重新登录'
                    })
                    store.commit('LOGIN_OUT') //传值给vuex的mutation改变state
                    setTimeout(() => {
                        window.location.reload() //浏览器刷新当前页面
                    }, 1000)

                    return
                case 403:
                    err.message = '拒绝访问'
                    break
                case 404:
                    err.message = '请求错误,未找到该资源'
                    break
                case 500:
                    err.message = '服务器端出错'
                    break
            }
        } else {
            err.message = '连接服务器失败'
        }
        Message.error({
            message: err.message
        })
        return Promise.reject(err.response)
    }
)

http.get = function (url, options) {
    return new Promise((resolve, reject) => {
        instance
            .get(url, options)
            .then(response => {
                if (response.code === 0) {
                    resolve(response.data)
                } else {
                    Message.error({
                        message: response.message
                    })
                    reject(response.message)
                }
            })
            .catch(e => {
                console.log(e)
            })
    })
}

http.post = function (url, data, options) {
    return new Promise((resolve, reject) => {
        instance
            .post(url, data, options)
            .then(response => {
                if (response.code === 0) {
                    resolve(response.data)
                } else {
                    Message.error({
                        message: response.message
                    })
                    reject(response.message)
                }
            })
            .catch(e => {
                console.log(e)
            })
    })
}

export default http

3.src文件夹下创建api文件夹，创建index.js用于封装所有的网络请求

import axios from "../utils/http"

//登录
export function login(user){
    return axios.get("/api/login?user=" + user)
}

4.组件中调用

导入请求方法

import { login } from "../../api"

调用

  methods: {
    async login() {
        // 网络请求
        let data = await login(this.account);
        let token = data.token;
        // 本地  vuex
        this.$store.commit('LOGIN_IN',token);
        this.$router.replace("/")
    }
  },