07-使用Axios来发起HTTP请求
再现代前端框架流行前，我们大概都是使用Jquery类库的ajax来发起Http请求操作。它很好的封装了 XMLHttpRequest 的调用，让我们偷了很多懒。但随着近年来前端各种标准的正式化，例如新标准中的promise Promise，generator/yield，async/await等，Jquery的ajax貌似已经落伍了，而且也不符合现有的标准。所以才有了我们采用 Fetch API 来实现的 http请求。
如 services/api.ts 所示
export const callApi = (url: string) => {
return fetch(url)
.then(response =>
response.json().then(json => {
if (!response.ok) {
return Promise.reject(json)
}
return json
})
)
}
Fetch 符合现有的标准，写法更加优雅。有些浏览器原生就支持 Fetch ，IE 还是一如既往的恶心。
fetch 浏览器兼容情况
所以如果要使用 fetch 需要 一些polyfill来填充。
不过 fetch 也存在一些问题：
- fetch 请求默认是不带 cookie 的，需要设置 fetch(url, {credentials: 'include'})
- 服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
- fetch 不支持同步请求
- fetch 不支持取消一个请求
- fetch 无法查看请求的进度
总之，fetch 级别太低，并非开箱即用，要顺利使用需要一些封装，但不适用于想偷懒的我们。
使用Axios
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。
特性
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
如下图所示，浏览器支持也满分。这么好的东西，肯定要用了。又可以节约时间多玩几把王者了。
浏览器支持
安装
运行命令yarn add axios
抽象一个API 基类 services/api.ts
import axios from 'axios';
export class BaseApi {
// 默认配置
static base_options() {
return {
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'http://localhost:8090/api/',
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
// `responseType` 表示服务器响应的数据类型
responseType: 'json',
// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
headers: {
'Access-Control-Allow-Origin': '*'
},
}
}
/**
* 通用Http请求处理
*/
static common = (name: string, url: string, config?: any) => {
let opts = { ...BaseApi.base_options(), ...config, url: url, method: name }
return axios(opts).then((res) => {
if (res.status === 200) {
return res.data
}
}).catch(error => {
console.log(error)
return error;
})
}
// get 请求
static get = (url: string, params?: {}) => {
return BaseApi.common('get', url, { params: params })
}
// post 请求
static post = (url: string, params?: {}) => {
return BaseApi.common('post', url, { params: params })
}
}
这里用到了 es7 的class 抽象属性，所以需要增加babel 插件支持，安装 yarn add -D @babel/plugin-proposal-class-properties
然后修改 babel.config.js
const plugins = [
["@babel/plugin-syntax-dynamic-import"],
["@babel/plugin-proposal-class-properties"]
]
增加一个专门处理小说模块的API类 services/novelapi.ts
import { BaseApi } from "./api";
import { API_URLS } from "../constants";
export const queryNovels = () => {
console.log(process.env.NODE_ENV)
let url = API_URLS.NOVELS;
return BaseApi.get(url)
}
API 路径也抽到常量类中集中管理
// 定义API请求路径
export const API_URLS = {
NOVELS: `/novels`,
}
修改下actions/novel.ts，调用queryNovels
// 异步 Action
export const searchNovels = () => (
(dispatch: any) => {
dispatch(fetchNovels()); // {type: 'FETCH_NOVELS'}
queryNovels().then(
resp => {
if (resp.isAxiosError) {
dispatch(fetchNovelsNG(resp)) // {type: 'FETCH_NOVELS_NG', payload: error, error: true}
} else {
dispatch(fetchNovelsOK(resp.novel)) // {type: 'FETCH_NOVELS_OK', payload: json}
}
}
)
}
);
到此我们的API算是替换成功了。为了开发调试，我们自己创建一个自用的模拟API服务器，这里需要添加
yarn add -D express mockjs
使用 express 创建服务器，mockjs 提供模拟数据。关于mockjs 具体请看 mockjs语法参照。
在根目录下创建 mock/mockServer.js
let express = require('express'); //引入express
let Mock = require('mockjs'); //引入mock
let app = express(); //实例化express
app.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', '*');
res.header('Access-Control-Allow-Methods', '*');
res.header('Access-Control-Allow-Credentials', 'true');
res.header('Content-Type', 'application/json;charset=utf-8');
next();
})
app.get('/api/novels', (req, res) => {
res.json(Mock.mock({
"novel|20": [{
'id|+1': 1,
'title': '@csentence(5,12)',
'author': '@cname',
"summary": "@cparagraph"
}],
}));
})
app.listen('8090', () => {
console.log('监听端口 8090')
})
OK，然后添加相关的启动脚本
"mock": "node ./src/mock/mockServer.js"
运行服务器后，再启动程序，完美。
image.png
