首页 > 移动平台 > 详细

基于axios的万能封装

时间:2019-12-26 17:53:54      阅读:159      评论:0      收藏:0      [点我收藏+]

一 . 命名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的万能封装

原文:https://www.cnblogs.com/shaoshuai0305/p/12102402.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!