原创首发
领券联盟-前端版本-PowerByNuxt.js-添加axios实现网络请求
添加axios实现网络请求
顶部内容和底部内容我们基本写完了,接下来我们应该是需要中间部分的内容。
这部分内容我们得从后台服务器中获取
所以我们需要一个axios框架来请求数据
Promise based HTTP client for the browser and node.js
直接安装方法
cnpm install axios --save
执行下来如下:
打开package.json会发现,多了这个
创建一个工具类封装一下
如果我们直接使用axios发起请求,大概会这样子
import axios from 'axios';
axios.defaults.withCredentials = true // 跨域
axios.defaults.timeout = 100000;
axios.get("http://localhost:50200/api/article/detail/" + params.id).then(result => {
//TODO:
}
数据还得处理一下才能使用
我们可以稍微封装一下
我们创建一个目录utils
创建一个http.js
import axios from 'axios';
//携带证书
axios.defaults.withCredentials = true;
//设置超时时间
axios.defaults.timeout = 100000;
export default {
//get请求
requestGet(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// post请求
requestPost(url, params = {}) {
return new Promise((resolve, reject) => {
axios.post(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// delete请求
requestDelete(url, params = {}) {
return new Promise((resolve, reject) => {
axios.delete(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
},
// put请求
requestPut(url, params = {}) {
return new Promise((resolve, reject) => {
axios.put(url, params).then(res => {
resolve(res.data)
}).catch(error => {
reject(error)
})
})
}
}
这样子我们就精简成增删改查了
至于怎么使用,请看后面的课程吧,详情请看视频课程内容。感谢同学们的支持与关注。