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是封装
*/