接口和封装axios解决跨域问题

终端安装axios

cnpm install --save axios

如果你有接口，可以在POSTMAN中测试接口是否能用

比如我这里用的是尚硅谷最新接口  http://gmall-h5-api.atguigu.cn

为啥要二次封装？
请求拦截器：可以在发请求之前处理一些业务
响应拦截器：服务器数据返回后，可以处理一些事情

（如果axios基础不好 可以参考一下git/axios文档）

跨域问题：
跨域是什么：协议、域名、端口号不同请求，称之为跨域

比如：
http://localhost:8080  前端项目本地服务器
http://39.98.123.211     后台服务器

传统解决方法：JSONP，CROS，代理

 

在src建立一个api文件夹
在api文件夹中创建两个文件
1.index.js

//这个模块用于对所有API接口进行统一管理
import requests from "./request";
//三级联动接口：/api/product/getBaseCategeryList  是一个GET请求 无参数
//发请求 axios发请求返回结果Promise对象

export const reqCategoryList=()=>{
    return requests({url:"/product/getBaseCategeryList",method:"get"})
}

2.request.js

//对于axios进行二次封装
import axios from "axios";

//利用axios对象的方法create创建一个axios实例
//request就是axios，只不过稍微配置一下
const requests=axios.create({
    //配置对象
    //基础路径，发请求时路径当中会出现api
    baseURL:"/api",
    //代表请求超时的事件为5s
    timeout:5000
});

//请求拦截器：可以在发请求之前处理一些业务
requests.interceptors.request.use((config)=>{
    //config是一个配置对象，对象里面有一个属性很重要，headers请求头
    return config
});

//响应拦截器
requests.interceptors.response.use((res)=>{
    //成功的回调函数:服务器响应函数回来以后，响应拦截器可以检测到，可以做一些事情
    return res.data
},(error)=>{
    //响应失败的回调函数
    return Promise.reject(new Error("faile"))
});

//对外暴露
export default requests;