axios 封装数据请求

数据请求封装（axios）

安装 axios npm i axios
创建request.js文件（这个文件是用来封装数据请求的）

数据请求代码（下面写了常用的get 和post请求）

import axios from 'axios'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.create({// baseURL: 'https://some-domain.com/api/',timeout: 5000,// headers: {'X-Custom-Header': 'foobar'}});//上面都是默认配置// 第2步开始封装const request = ({// axios选项(axios选项去axios.js 官网上找 文档 请求配置 (找需要的))url,method = 'get',headers,params,data,withCredentials = false}) => {return new Promise((resolve,reject) => {//1. 这是数据处理switch (method.toLowerCase()){case 'post':axios({url,method,headers,params,data,withCredentials :false}).then( res => resolve(res)).then( err => reject(err))break;default://get put deleteaxios({url,method,headers,params,withCredentials : false}).then( res => resolve(res)).then( err => reject(err))break;}//2. 拦截器（去axios.js官网上去找拦截器）// 添加请求拦截器axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;}, function (error) {// 对请求错误做些什么return Promise.reject(error);});// 添加响应拦截器axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response;}, function (error) {// 对响应错误做点什么return Promise.reject(error);});})}//导出export default request

使用

引入封装的代码import request from "../utils/request.js";

两种方法：第一种promise方法 ;第二种async/await;方法

promise方法

request({url:'/api/addOrder',
method:'post',
data:params//传递的参数
}).then( ( res ) => {console.log("请求的数据",res)
} )

async/await;方法

async methodDataRequest () {let data = await request({url:'/api/addOrder',method:'post',data:params//传递的参数})console.log("请求的数据",data)
}

请求地址再次封装

创建一个api文件夹（用来存放请求地址）
在api文件夹下创建对应模块的js文件例如：hone.js 、login.js

在js文件中封装代码（先要引入封装好的axios代码）；

import request from "../utils/request.js";//引入封装好的axios文件export const $addOrder = (params) => {return request({url:'/api/addOrder',method:'post',data:params})
}
export const $orderPPXL = (data) => {return request({url:'/api/order/PPXL',method:'get',params:data})
}

注释：上面代码url地址中的api后面是后端地址；api 是我自己在vue.config.js中配置的代理（api就是后端接口的端口协议域名）

vue.config.js 的代理的代码

module.exports = {configureWebpack: {devServer: {proxy: {//名字可以自定义，这里我用的是api'/api': {target: 'https://www.baidu.com',//设置你调用的接口域名和端口号 别忘了加httpchangeOrigin: true,//这里设置是否跨域pathRewrite: {'^/api': ''}}}}},
}

axios 封装数据请求相关推荐

axios封装 —— 数据缓存、防止重复请求、动态加载
前言看了网上很多axios的封装,感觉都不是特别完善.于是我写了个比较完整的封装包括以下功能: 上传下载文件时的header设置错误相应的统一处理动态加载api 数据缓存.清除缓存.缓存级别.最 ...
axios的数据请求方式及跨域
express 的三大功能:静态资源.路由.模板引擎 app.use(express.static('www')); 只要是创建这个静态的目录,这个 www 的静态目录里面的文件就可以被访问数据的请 ...
axios重新调用失败的ajax_Vue之axios实现ajax数据请求
Vue通过axios实现数据请求 vue.js默认没有提供ajax功能的.所以使用vue的时候,一般都会使用axios的插件来实现ajax与后端服务器的数据交互. # 下载地址: https://un ...
HTML封装AJAX请求，在请求里面写登录的逻辑 ajax 网络请求 post
调用方法: 先引用config.js,然后调用封装网络请求. 里面三个参数 1.url, 2.请求需要提交的数据, 3.请求类型 // 获取二维码.背景图片接口 getScheduleInfo() ...
axios 发送同步请求 (async和await)
一般使用axios进行数据请求就是异步请求如果一定要同步使用数据的话,可以使用 async+await methods: {async fun1(){var res = await axios.po ...
封装axios的接口请求数据方法
lib文件夹中http.js文件的内容包含了数据请求,路由的拦截,同时向外界暴露的是一个方法,方法内有三个参数,分别为请求的方式,地址,数据 1 import axios from 'axios'; ...
axios队列 vue_(十三 )Vue 封装axios(四种请求)及相关介绍
Vue 封装axios(四种请求)及相关介绍首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
axios delete有请求体吗_封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...
axios 是如何封装 HTTP 请求的
作者 | 追公交车的小仙女责编 | 欧阳姝黎 Axios 毋庸多说大家在前端开发中常用的一个发送 HTTP 请求的库,用过的都知道.本文用来整理项目中常用的 Axios 的封装使用.同时 ...
封装 axios 取消重复请求
编者按:本文作者舒丽琦,奇舞团前端开发工程师在我们web开发过程中,很多地方需要我们取消重复的请求.但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文. 阅读完本文,你将了解以下内 ...

axios 封装数据请求

数据请求封装（axios）

使用

请求地址再次封装

axios 封装数据请求相关推荐

最新文章

热门文章