axios的一些使用步骤

122 阅读1分钟

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 然后在页面上负责调用这些接口