1、axios二次封装

二次封装axios是为了请求拦截器、响应拦截器。

请求拦截器：可以在发送请求之前可以处理一些业务；

响应拦截器：当服务器数据返回以后，可以处理一些事情。

安装axios

npm install --save axios

习惯与src的api下放置请求文件

在request.js文件下对axios进行二次封装

// 对于axios进行二次封装
import axios from "axios";// 1:利用axios对象的方法create,去创建一个axios实例
// 2:request就是axios,只不过稍微配置一下
const requests = axios.create({
//  配置对象
//  基础路由，发请求的时候，路径当中会出现apibaseURL: "/api",
//  代表请求超时的时间5Stimeout: 5000,
});//请求拦截器：在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
//  config: 配置对象，对象里面有一个属性很重要，headers请求头return config;
});//响应拦截器
requests.interceptors.response.use((res) => {
//  成功的回调函数：服务器相应数据回来以后，响应拦截器可以检测到，可以做一些事情return res.data;
}, (error) => {
//  响应失败的回调函数
//   return Promise.reject(new Error('fail'));nprogress.done();
});// 对外暴露
export default requests;

2、接口统一管理

在src文件夹下index.js文件中

// 当前这个模块：API进行统一管理
import requests from "@/api/request";
// 三级联动接口
// api/product/getBaseCategoryList get 无参数
// 发请求：axios发请求返回结果Promise对象
export const reqCategoryList = () => requests({url: '/product/getBaseCategoryList', method: 'get'})

详情查询文档：axios中文网|axios API 中文文档 | axios

跨域问题

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

http://localhost:8080/#/home ---- 前端项目本地服务器

http://39.98.123.211 ----后台服务器

解决可以使用：JSONP、CROS、代理。

下面是使用代理解决。

DevServer | webpack 中文文档

没有webpack.config.js文件暴露，在项目的根目录下新建vue.config.js配置文件也是一样。

proxy设置中间代理，可以帮我们向服务器发起请求。跨域问题是由浏览器的原因引起。

'/api'：就是识别发起的请求
target：就是要获取服务器的API地址

module.exports = {
//  关闭eslintlintOnSave: false,// 代理跨域devServer: {proxy: {'/api': {target: 'http://39.98.123.211',}}}
}

注意：修改配置文件需要重启项目

axios二次封装以及API接口统一管理相关推荐

axios get 某个参数是数组怎么传_Vue 中 Axios 的封装和 API 接口的管理
我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios ...
vue中Axios的封装与API接口的管理详解
一:axios的封装 vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是promise的http库,可运行在浏览器端和node.js中. 安装 npm install axios ...
拦截器读post参数导致接口post请求报错_vue中Axios的封装和API接口的管理
一.axios的封装在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响 ...
$.post请求的参数在后台代码中得到为null_vue中Axios的封装和API接口的管理
来源:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axio ...
router中获取vuex_Vue 中 Axios 的封装和 API 接口的管理
(给JavaScript加星标,提升前端技能) 作者:愣锤 https://juejin.im/post/684490365288107214 如图,面对一团糟代码的你~~~真的想说,What F~U ...
【Vuejs】1028- 中 Axios 的封装和 API 接口的管理
如图,面对一团糟代码的你~~~真的想说,What F~U~C~K!!! 回归正题,我们所要的说的axios的封装和api接口的统一管理,其实主要目的就是在帮助我们简化代码和利于后期的更新维护. 一.a ...
axios封装，api接口封装统一管理
axios封装,api接口封装统一管理一. axios说明 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios的封装和api接口的统一管理, ...
原生 Ajax 封装和 Axios 二次封装
AJAX 异步的JavaScript与XML技术( Asynchronous JavaScript and XML ) Ajax 不需要任何浏览器插件,能在不更新整个页面的前提下维护数据,但需要用户允 ...
微服务架构之公共模块式中创建API接口统一返回结果ApiResult
微服务架构之API接口统一返回结果ApiResult 一.创建公共模块common步骤二.在api中新建一个ApiCode枚举和ApiResult 三.ApiCode与ApiResult编码如下四 ...

axios二次封装以及API接口统一管理

1、axios二次封装

2、接口统一管理

跨域问题

axios二次封装以及API接口统一管理相关推荐

最新文章

热门文章