react获取服务器api接口数据-06

一、axios获取服务器接口(非jsonp)

axios不支持jsonp跨域。

1、axios安装

使用命令行进行安装：

npm install axios --save

2、项目中引入axios

import axios from 'axios';

3、axios使用

在组件的方法中使用：

axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理返回成功的数据
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  })
  .finally(function () {
    // always executed
  });
 
// 带参数的
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // always executed
  });  
 
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

axios支持下面的请求方式：

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

具体见官网：https://www.npmjs.com/package/axios

二、fetch-jsonp获取服务器接口(jsonp)

axios不支持jsonp跨域。

1、fetch-jsonp安装

使用命令行进行安装：

npm install fetch-jsonp --save

2、项目中引入fetch-jsonp

import fetchJsonp from 'fetch-jsonp';

3、fetch-jsonp使用

在组件的方法中使用：

fetchJsonp('/users.jsonp')
  .then(function(response) {
    return response.json()
  }).then(function(json) {
    console.log('parsed json', json)
  }).catch(function(ex) {
    console.log('parsing failed', ex)
})

和axios的区别是第一个then是处理jsonp的地方，第二个then才是写成功后处理数据的地方
具体见官网：https://www.npmjs.com/package/fetch-jsonp

---

写在最后：

• 如果文章中有错误或是表达不准确的地方，欢迎大家评论中指正，以便我完善。
• 文章我也会根据所学到新的知识不断更新。