vue vue-cli axios封装

封装axios可以更好的维护请求地址改变后更好修改下面上代码

1.在src目录下创建一个文件夹建议起名utils

2.如上图所示创建三个js文件我们先来写http.js的内容

import axios from "axios";
const http=axios.create({
    baseURL:'/api',   //配置公用地址
    withCredentials:true,  //跨域是否携带token
    timeout:5000  //响应延迟时间
})
//设置请求拦截器
http.interceptors.request.use(config => {
  //可以设置token login 
  config.headers.mytoken = 'nihao' //设置响应头
  return config
}, err => {
  console.log(err)
})
//设置响应拦截器
http.interceptors.response.use(res => {
   //可以设置响应的状态码，关闭login
  return res = res.data //拦截处理响应结果，直接返回需要的数据
}, err => {
  console.log(err)
})

export default http //抛出http

3.现在我们写api.js的内容

import api from "./http";
//这里引入http在这里可以接收请求地址请求方式以及参数
export default function requests({method='get',url='',data={},params={}}){
    //把api返回出去
    return api({
        method,
        url,
        data,
        params
    })
}

4.最后一个是统一管理请求的js文件

//引入api这里是所有请求的管理
import req from './api'
//home页面请求在首页可以import引入gethome方法获取数据后面可以传递地址参数请求方式
export const gethome=()=>req({url:'home/shejishi'})

5.在页面引入gethome获取数据

<script>
//引入获取home页面的方法
import { gethome } from "../utils/req";
export default {
  name: "Home",
  mounted() {
    gethome().then(res=>{
      console.log(res);
    })
  },
  components: {},
};
</script>