axios 浏览器支持情况
客户端安装axios
<script src="//cdn.bootcss.com/axios/0.16.2/axios.min.js"></script>
使用npm安装axios
npm install axios --save
发送一个GET请求
// 第一个参数是请求地址, 第二个参数是一个对象,params是一个发送URL参数
// 请求示例:/fetch?name=xiejiahe
// GET请求第二个参数要不要无所谓,你可以在请求地址拼接参数, 但是有点麻烦。
axios.get('/fetch', {
params: {
name: 'xiejiahe'
}
})
.then(res => {
// 请求成功后要做什么?(注意axios默认是application/json; charset=utf-8,如果后端返回其他数据类型会报错)
console.log(res)
})
.catch(e => {
// 失败后要做什么? 一般是请求地址有误或超时等
console.log(e)
})
发送一个POST请求, 跟GET有点相似
// 注意了第二个参数是data,和body一起发送的数据
axios.post('/fetch', {
name: 'xiejiahe'
})
.then(res => {
// 请求成功后要做什么?(注意axios默认是application/json; charset=utf-8,如果后端返回其他数据类型会报错)
console.log(res)
})
.catch(e => {
// 失败后要做什么? 一般是请求地址有误或超时等
console.log(e)
})
除了GET/POST 还支持,用法是基本是相似
不要只用GET和POST, 多用用delete, put 遵循REST API 设计思想。
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios底层配置,他相当于jquery($.ajax)
axios({
// 请求地址
url: '/fetch',
// 请求方法,默认GET,不区分大小写,推荐大写
method: 'GET',
// 会被添加到URL中,比如 http://www.xiejiahe.com/fetch ,你可以理解为换了请求地址
baseURL: 'http://www.xiejiahe.com',
// 请求头, 可以更改默认的头,axios默认是不带X-Requested-With
headers: {
'X-Requested-With': 'XMLHttpRequest',
ContentType: 'text/plain',
},
// 很多人不理解params和data的区别,params是GET请求的参数
params: {
name: 'XieJiaHe'
},
// 而dadta是POST请求的参数是不带在URL地址里的
data: {
name: 'XieJiaHe',
},
// 设置请求超时时间, 会在catch捕获
timeout: 3000,
// 身份验证,如果你的请求地址是需要用户名和密码的话
auth: {
username: 'xiejiahe',
password: 'root'
},
// 响应类型,默认是json的
// 支持的类型:'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json',
// 最大Content-Length, 这个是请求头
maxContentLength: 3000,
// 代理
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'your username',
password: 'your password'
}
},
// 允许修改请求的数据在发送到服务
// 只适用于 'PUT'、'POST'、'PATCH' 请求
// 函数必须返回字符串或ArrayBuffer、 FormData或Stream
transformRequest: [function (data, headers) {
// 你可以在这里处理你想要的数据
return data;
}],
// 修改响应数据
transformResponse: [function (data) {
// 你可以在这里处理你想要的数据
return data;
}],
})
全局配置
// 配置请求URL
axios.defaults.baseURL = 'https://www.xiejiahe.com';
// 每次请求带上的头信息
axios.defaults.headers.common['x-access-token'] = 'token';
// 只有post的时候才带上的头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
// 请求超时时间
axios.defaults.timeout = 5000;
拦截器已有另一篇文章,点击这里