React AJAX

接口联调：前后端把接口名改为一致

npm i axios -S：安装axios包

配置步骤

1.在src目录下创建services目录来管理ajax
2.新建apis.js来管理接口

export default {
	baseURL: 'https://jsonplaceholder.typicode.com',
	// 获取todos的接口
	todos: '/todos'

3.新建index.js来配置ajax

import axios from 'axios'
import apis from './apis'

const ajax = axios.create({
	baseURL: apis.baseURL
})

//还会做一些全局的拦截器

export const getTodos = () => {
	return ajax.get(apis.todos)
}

使用步骤

1.挂载ajax

1.1全局使用
将配置的ajax挂载到全局，任何地方都可以使用，在src目录下的index.js中

	import * as services from './services'
	React.Component.prototype.http = services

因为App.js导出的是继承React.Component的实例，所以将ajax方法挂载到Component上在任何地方都可以使用

1.2局部使用
在需要使用的ajax的组件页面

import { getTodos } from './services'
componentDidMount () => {
	getTodos()
		.then(...)
		.catch(...)
		.finally(...)
}