Vue 框架基础11 - Axios和Fetch API

Fetch

1. Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。

2. 它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

3. 语法：传入两个值（ 请求的url,控制不同配置的 init 对象）返回一个 **promise**对象。

fetch(url='http://example.com/movies.json',[init])
  .then(response => response.json())
  .then(data => console.log(data))

4. 在组件中使用

 created () {
const result = fetch('http://localhost:3000')
    console.log('result:', result)
    result
      .then(res => res.json())
      .then(data => {
        console.log('数据：', data)
      })
      }
// 带参写法
//const result = fetch('http://localhost:3000',{
//	method: 'POST',
//	data: {
//		id: 1
//	}
})
//console.log('result:', result)
//result
//  .then(res => res.json())
//  .then(data => {
//    console.log('数据：', data)
//  })
  /*
  * 控制台打印
  * result: Promise {<pending>} // 通过fetch返回的是一个promise对象，就可以继续回调
  * 数据： (5) [{…}, {…}, {…}, {…}, {…}]
  */    

axios

1. Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

2. 在控制台安装 npm install axios。

3. utils 文件夹下新建 request.js 文件，并在文件里面二次封装 axios。

import axios from 'axios' // 引入 axios
import { Toast } from 'vant' // 引入vant组件，发送请求时出现提示信息
// 定义baseURL
const baseURL = 'http://localhost:3000'
// 创建axios实例
const services = axios.create({
    baseURL,
    timeout: 1000, // 1s后还没数据回来结束此次响应
})
// 拦截请求
services.interceptors.request.use(config=>{
    // 加载提示
    Toast.loading({
        message: '加载失败',
        duration: 0,
    })
    return config
})
// 拦截响应
services.interceptors.response.use(resDate=>{
    // 关闭提示
    Toast.clear()
    // 响应数据处理：根据前后端接口规范来处理数据结构
    if(resDate.status === 200){
        return resDate.data
    }
    
    return Promise.reject(new Error('接口请求异常'))
})
export default services

4. 在 main.js 入口文件中配置。

Vue.prototype.$http=request // 将request挂载到Vue的原型上于$bus类似，这样全局都可调用

5. 在组件中调用

 created () {
 
    this.$http({
      url: 'https://jsonplaceholder.typicode.com/users',
      method: 'GET'
    }).then(data => console.log('数据', data))
  }
  /*
* 控制台输出
* {data: Array(5), status: 200, statusText: 'OK', headers: {…}, config: {…}, …} // request中的输出
* [{…}, {…}, {…}, {…}, {…}] // App.vue中的输出
* 可以看出axios对数据进行了二次封装，这与fetch两次回调拿到数据有区别
* axios与fetch返回的都是promise对象
* fetch是规范底层api
* axios是封装
*/