提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
vue中的axios简单封装
提示:以下是本篇文章正文内容,下面案例可供参考
步骤
1.安装axios
代码如下(示例):
npm install axios
2.在根目录下新建utils文件夹,在utils文件夹下建立request.js文件。
//request.js文件
import axios from "axios"
const request = axios.create({
baseURL: "http://localhost:3000",//路径前缀
timeout: 300000, // 请求超时时间
})
// 请求拦截器
request.interceptors.request.use(config => {
return config
}, ()=>{
console.log("错误")
})
// 响应拦截器
request.interceptors.response.use((response) => {
return response.data
},)
export default request
2.在src目录下建立api文件夹
在api文件夹里建立js文件,js文件里的内容大同小异
代码如下(示例):
import request from "../utils/request";
const api={
posts:'/posts',
comments:'/comments'
}
//应用列表
export function getposts(parameter) {
return request({
url: api.posts,
method: 'get',
data: parameter
})
}
export function getcomments(parameter) {
return request({
url: api.comments,
method: 'get',
data: parameter
})
}
3.在实例中使用
1.首先导入api中js文件中定义的getposts函数
2.直接使用
<script>
import{getposts} from "../../api/json"
export default {
name: "HelloWorld",
data() {
return {
newsList: "",
};
},
methods: {
getNewsList() {
getposts().then(res=>{
this.newsList=res
})
},
},
created(){
this.getNewsList();
}
};
</script>
# 总结