axios是专门封装了ajax的一个插件,核心都XMLHttpRequest,它是一个promise的封装
1 下载的命令 cnpm i axios --save
使用的时候参照着 jquery
axios 的一些叁数
axios({
url:"请求地址",
method:"请求方式,
headers:{}, 请求头可以写也可以不写 ...
params:{} //get请求方式用params接收数据
data:{} 非get请求传参 比如:post用data 接收数据
}).then (res=>{}).catch(err=>)//成功走.then () 失败走.catch()
可以二次封装axios
1 在 src下 新建个文件夹utils下新建个文件/request.js
举个小例子
`import axios from "axios";
import store from "@/store";
const request = axios.create({
baseURL: "cnodejs.org/api/v1", //前缀地址
});
// 请求拦截
request.interceptors.request.use(
function(config){
let token = store.state.user.token
if(config.method.toLocaleLowerCase() == "get"){
config.params = {...config.params,accesstoken:token}
}
if(config.method.toLocaleUpperCase() != "get"){
config.data = {...config.data,accesstoken:token}
}
return config
},
function(error){
return Promise.reject(error)
}
)
// 响应拦截器
export default request;
二次封住那个 axios
2 在 src下 新建个文件夹api/下新建个文件index.js 举个小例子
import request from "@/utils/request";
//引入请求数据
// 获取主题列表
// tab page limit
export function getTopicList(params = {}) {
return request({
url: "/topics",
method: "get",
params,
});
};
export const collect = (topic_id) => {
return request({
url: "/topic_collect/collect",
method: "post",
data: {
topic_id,
},
});
};
`
将接口在这里创建 导出
3 然后在页面上负责调用这些接口