使用 Axios 处理 Ajax

安装：

npm i [email protected]

引入包：

import axios from 'axios';

我们用 jsonplaceholder 网站（https://jsonplaceholder.typicode.com/posts）作为简易的数据来源来演示下。

---

get 方法

import axios from 'axios';

componentDidMount() {
  const promise = axios.get('https://jsonplaceholder.typicode.com/posts');
  console.log(promise);
}

使用 asios.get() 方法请求服务器时会返回一个 ES6 Promise 对象，是一个装载了异步操作的对象。

该对象创建时候为 pending 状态，请求结束后变为 resolved （请求成功） 或 rejected （请求失败）状态。

我们把 promise 对象打印出来看看：

[[PromiseStatus]] 表示的 promise 的状态 "resolved"。

[[PromiseValue]] 表示请求所获得的数据。

两个中括号表示的是内部属性，不能够使用点操作符来访问。

较为方便的方法是使用 Javascript 的异步方法来获取返回结果：

async componentDidMount() {
  const promise = axios.get('https://jsonplaceholder.typicode.com/posts');
  const response = await promise;
  console.log(response);
  }

优化一下代码：

async componentDidMount() {
  const {data} = await axios.get('https://jsonplaceholder.typicode.com/posts');
  this.setState({posts: data})
  };

---

post 方法

apiEndPoint = 'https://jsonplaceholder.typicode.com/posts';

handleAdd = async () => {
  const obj = {title: 'a', body: 'b'};
  const {data: post} = await axios.post(apiEndPoint, obj);
  console.log(post);
};

apiEndPoint 是请求的 URl，obj 是要通过 post 发送的数据对象。post 方法用于添加新对象。

需要注意的是 async 关键字在箭头函数中的位置。

---

put 方法

handleUpdate = async (post) => {
  post.title = 'Updata';
  await axios.put(apiEndPoint + '/' + post.id, post);
};

put 方法用于更新某个对象。

---

delete 方法

handleUpdate = async (post) => {
  await axios.delete(apiEndPoint + '/' + post.id);
};