基于axios的万能封装

一 . 命名axios.js

import axios from ‘axios‘;
export default function ajax(url = ‘‘, params = {}, type = ‘GET‘) {
  let promise;
  //1.返回promise对象

  return new Promise((resolve, reject) => {
    if (‘GET‘ === type.toUpperCase()) {
      //1.1 拼接字符串
      let paramsStr = ‘‘;
      Object.keys(params).forEach(key => {
        paramsStr += key + ‘=‘ + params[key] + ‘&‘;
      });
      //1.2 过滤  最后的&
      if (paramsStr !== ‘‘) {
        paramsStr = paramsStr.substr(0, paramsStr.indexOf(‘&‘));
      }
      //1.3 拼接完整的路径
      url += ‘?‘ + paramsStr;
      //1.4 发起get请求
      promise = axios.get(url);
    } else if (‘POST‘ === type.toUpperCase()) {
      promise = axios.post(url, params);
    }
    //1.5 返回结果
    promise
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

二 .  命名为service.js 用来定义接口的请求方法

//使用
import ajax from ‘./ajax‘; //引入上边的文件
//1.定义基础路径
const BASE_URL = ‘http://www.baidu.com‘;
//2.请求
export const getTodoList = () => ajax(BASE_URL + ‘/api/todos‘);

...

三 .  父组件界面中

import { getTodoList } from ‘./service.js‘;

componentDidMount(){
  this.reqTodoList()
}
//请求方法
async reqTodoList(){
 const result =await getTodoList()
 console.log(result)
}

express本地服务器搭建  接口快写   无接口时使用    或者使用mock+umi

 基于axios的万能封装

 

基于axios的万能封装

上一篇:【Nagios】分析


下一篇:AppBoxFuture: Sql存储的ORM查询示例