用es6和Async风格封装axios请求方法

前提准备

假设已经提前安装node.js和axios,并且在src文件目录下创建了api文件夹,并在api文件夹下创建request.js(当然其他文件夹名字文件名也可以)

创建和封装axios实例

引入axios,创建axios实例,设置关键属性

import axios from \'axios\';var instance = axios.create({timeout: 30*1000, // 请求超时});instance.interceptors.request.use(config => {//请求拦截器可以添加一些请求头部和请求参数return config;},error => {// 对请求错误做些什么，处理这个错误console.warn(error);return Promise.reject(error);});instance.interceptors.response.use(function(response) {//相应拦截器return response;},function(error) {// 对响应错误做点什么console.log(\'axios error\',error)return Promise.reject(error);});class request {// 使用async ... awaitstatic async get(url,params) {console.log(params);return await instance.get(url, {params}); //eslint-disable-line}static async post(url, params) {console.log(params);let tp=null;if(params)tp=JSON.parse(JSON.stringify(params))tp=tp ? tp : params;return await instance.post(url, tp); //eslint-disable-line}}export default request;

封装请求函数

封装get方法和post方法

import request from \'./request\'const BASE_API=\'http://localhost:3030/\'//封装get方法export function getfn(param){let url=BASE_API+\'registor\';return request.get(url,param)}//封装post方法export function postfn(param){let url=BASE_API+\'registor\';return request.post(url,param);}

在页面中使用

在页面中引入所需调用的函数方法即可

import {postfn,getfn} from \'./api/utils\'window.addEventListener(\'load\',()=>{postfn().then(res=>{console.log(res.data);})})