一 . 命名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