axios二次封装及跨域解决

1、安装axios：

npm i axios -s

2、axios二次封装（在src同级目录下新建api文件夹，里面新建http.js文件）。

import axios from 'axios'
    const request = axios.create({
        // baseURL:'/api',
        // timeout:2000,
    })
    // 请求拦截器
    request.interceptors.request.use(config=>{
        console.log("请求拦截成功")
        // 例如给后端传递token,config是配置参数
        //如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
        //const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
        //if(token){
        //config.params = {'token':token} //如果要求携带在参数中
        //config.headers.token= token; //如果要求携带在请求头中
        return config
        },
        error=>{
            console.log('请求拦截失败')
            return Promise.reject(error)
        }
    )
    // 响应拦截器
    request.interceptors.response.use(res=>{
        console.log("响应拦截成功")
        if(res.status != 200){
            return;
        }else{
            return res
        }
        },
        error=>{
            console.log("响应拦截失败")
            return Promise.reject(error)
        }
    )
export default (url,method="GET",data={})=>{
    return request({
        url,
        method,
        data
    })
}
// export default request

3、api解耦（在api文件夹，里面新建home.js文件）。

import http from '../api/http.js'
let baseURL = '/api'
export function re (){
    return http(
        baseURL + '/api/slider/getSliders'
    )
}

4、组件使用（发请求）

import {re} from "../api/home.js"
methods:{
    st(){
      re().then(res=>{
        console.log(res)
      })
    }
  }

此时还有一个问题就是跨域问题。

5、在main.js文件中配置。

import axios from "axios";
axios.defaults.baseURL='http://localhost:8080'

6、在vue.config.js中配置

devServer:{
    proxy:{
      "/api": {
      //后台服务器地址即baseURL
        target: "http://testapi.xuexiluxian.cn",
      }
    }
  }

7、效果。