Vue axios 封装_vue 安装 qs axios-CSDN博客

本文链接：https://blog.csdn.net/web_liudong/article/details/121767588

该博客主要介绍了一个JavaScript文件中如何配置和使用axios库进行HTTP请求。设置了请求超时时间、基础URL，并添加了请求和响应拦截器来处理token及错误。提供了get和post方法用于发起HTTP请求，并在api.js中定义了登录接口。在实际应用中，通过这些接口获取和发送数据。

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

http.js

import axios from 'axios'
import QS from 'qs'


// 请求超时时间
axios.defaults.timeout = 1000 * 10;
// post请求头
// axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8';

// 设置公共url
axios.defaults.baseURL = '/'

// 添加请求拦截器
axios.interceptors.request.use(function(config) {

    // console.log(config);
    // 在发送请求之前做些什么
    // 判断token 是否存在
    // if (user) {   
    //   token = user.token;
    // }
 config.headers.common['Authorization'] = ''

    return config;
}, function(error) {
    // console.log(error);
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function(response) {
    // console.log(response);
    // 对响应数据做点什么
    return response;
}, function(error) {
    // console.log(error);
    // 对响应错误做点什么
    return Promise.reject(error);
});
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
                params: params
            })
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
        axios.post(url, params)
            .then(res => {
                resolve(res.data);
            })
            .catch(err => {
                reject(err.data)
            })
    });
}

api.js

import {get, post } from './http'
const BASE_URI = '/dev'
    // const BASE_URI = ''


//登录
export const login = params => post(BASE_URI + '/productRequest/user/account/login', params)

使用

import { demo1 } from '@/request/api';// 导入我们的api接口
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  created(){
     this.getData()
  },
  methods: {            
        // 获取数据            
        getData() {
            // 调用api接口，并且提供了两个参数             
            demo1({
             user_id:'11903849849683968'
            }
            ).then(res => {
              console.log(res)      
            })            
        }        
    }
}