vue里封装axios请求

import axios from 'axios' // 引入axios
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,

const BASE_URL = ''

// 创建axios实例
const http = axios.create({
    baseURL: BASE_URL,
    timeout: 99999 // 请求超时时间                                   
})

// 添加request拦截器 
http.interceptors.request.use(config => {
    config.data = QS.stringify(config.data)
    return config
}, error => {
    Promise.reject(error)
})

// 添加respone拦截器
http.interceptors.response.use(
    response => {
        if (response.data.code != 200) {
            console.info(response);
            return Promise.reject(response)
        }
        return Promise.resolve(response.data)
    },
    error => {
        if (error.response) {
            switch (error.response.status) {
                case 401:
                    console.info(401)
                    break;
                case 403:
                    console.info(403)
                    break;
                case 404:
                    console.info(404)
                    break;
                case 500:
                    console.info(500)
                    break;
            }
        }
        console.info('请求失败!');
        return Promise.reject(error.response)
    }
)

//封装get请求

export function get(url, params = {}) {
    return http({
        url,
        method: 'GET',
        headers: {},
        params
    })
}

//封装post请求
export function post(url, data = {}) {
    return http({
        url,
        method: 'POST',
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        },
        data
    })
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中封装Axios请求可以按照以下步骤进行: 1. 首先,安装axiosvue-axios依赖。在命令行中运行以下命令: ``` npm install axios vue-axios --save ``` 2. 在Vue的入口文件(例如main.js)中导入axiosvue-axios,并使用Vue.use()方法将vue-axios注册为Vue插件: ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 3. 创建一个api.js文件用于封装所有的接口请求。在api.js文件中,可以定义一个全局的axios实例,并设置基础URL、请求拦截器和响应拦截器等: ```javascript import axios from 'axios'; const instance = axios.create({ baseURL: 'http://api.example.com', // 设置基础URL }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前一些处理,例如添加请求头 config.headers.Authorization = 'Bearer token'; return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据进行处理,例如获取返回的数据 return response.data; }, (error) => { return Promise.reject(error); } ); export default instance; ``` 4. 在需要发送请求的组件中,导入api.js文件,并使用封装好的axios实例发送请求: ```javascript import api from './api.js'; // 发送GET请求 api.get('/users') .then((response) => { // 处理返回的数据 console.log(response); }) .catch((error) => { // 处理错误 console.error(error); }); // 发送POST请求 api.post('/users', { name: 'John Doe' }) .then((response) => { // 处理返回的数据 console.log(response); }) .catch((error) => { // 处理错误 console.error(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值