vue封装axios

1.下载axios

npm install axios

 2.创建request.js文件

目录：src/utils/request.js

//request.js文件
import axios from "axios";

//创建实例 这里设置baseURL是为了统一接口在vue.config.js里面做代理
const http = axios.create({
    baseURL: '/api', 
    timeout: 1000, 
    headers: {
        'Content-Type': 'application/json'
    }
});


// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么 一般都在请求之前加上token在我们的Authorization里面
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么  响应拦截一般都是对响应数据进行一个返回可以返回response.data具体情况看你们的数据格式
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


export default http

3.接口封装

为了接口统一管理我们一般都是在src/api文件夹下面创建接口文件

例如：exampleApi.js

import http from "@/utils/request";
import qs from 'qs'

// 实例POST接口
export function examplePost (data) {
    return http.request({
        url: '/api/examplePost',
        method: 'POST',
        data
    })
}

// 实例GET接口
export function examplePostGet(data) {
    return http.request({
        url: '/api/examplePostGet?'+qs.stringify(data),
        method: 'GET',
    })
}

其中的qs模块就是对请求参数的一个格式化 它可以将我们的参数自动拼接到url中

例如：

参数
data：{
name：'sanmu',
age:13,
sex:'男',
clazz:'三年级二班'
}

当你使用
str = qs.stringify(data)
返回的数据就是 str 就是 name=sanmu&age=13&sex=男&clazz=三年级二班
这样

4.页面使用

//哪个页面使用哪个页面引入
<script>
import { examplePost,examplePostGet } from "@/api/exampleApi"
export default {
  methods: {
    textFn() {
      examplePost({ text: '测试参数' }).then(res => {
        console.log(res);
      })
    }
  },
}

</script>