本文目录
- 1.axios是什么？
- 2.简单使用
- 3.请求方法的别名
- 4.处理并发+请求
- 5.创建实例
- 6.拦截器
- 7.作为vue的全局引用插件使用
- 8.通过Axios拿取指定数量的数据
1.axios是什么？
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它有以下特征：
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
在vue全家桶中，推荐使用，说白了就是用它来发送请求，和后端交互
2.简单使用
1.安装axios
npm install axios --save
2.使用axios发送get请求
在组件内部导入axios，这里以Demo1.vue为例,在Demo1.vue中引入：
import axios from 'axios'
在created中发送请求
created () {
axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
.then((response) => console.log(response))
}
上面代码中打印出来的内容是一个对象，里面的内容结构为：
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}
上面例子中使用get方式请求数据，其中get方式是默认的，因此，你也可以写成这样
axios('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
.then((response) => console.log(response))
3.使用axios发送post请求
接下来，你可以尝试着去发送一下post方法了，使用方法和jquery中ajax方法类似
axios({
method: 'post',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add'
})
.then((response) => console.log(response))
4.错误处理
你需要在catch里面处理错误，例如：
axios({
method: 'post',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add/1'
})
.then((response) => console.log(response))
.catch((err) => console.log(err))
5.传递参数方式
get请求方式传参数，配置params选项就可以了
axios({
method: 'get',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list',
params: {
title: 'xxx',
count: 30
}
})
.then((response) => console.log(response))
注意：params里面的内容作为查询字符串和url一起发送
post请求方式传参数，配置data选项
axios({
method: 'post',
url: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/add',
data: {
title: 'html最佳入门',
count: 80
}
})
.then((response) => console.log(response))
.catch((err) => console.log(err))
注意：data的内容作为请求体发送
3.请求方法的别名
为方便起见，为所有支持的请求方法提供了别名
- axios.get(url[, config])
- axios.request(config)
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
举个例子，原来使用对应的别名发送，可以写成这样
axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list', {
params: {
id: 10
}
})
.then((response) => console.log(response))
其他请求方式使用方法和上面例子类似
4.处理并发+请求
有时候，你想一次执行多个请求，可以使用all方法
function http1 () {
return axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list')
}
function http2 () {
return axios.post('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/update')
}
axios.all([http1(), http2()]).then((response) => {
// 这里response返回一个数组,里面装了两个请求的返回结果
console.log(response)
})
上面代码中返回结果被放入到了一个数组中，如果想分别把结果拿出来，可以使用axios.spread方法
axios.all([http1(), http2()]).then(axios.spread((res1, res2) => {
// res1 对应http1的请求结果 res2对应http2的请求结果
console.log(res1, res2)
}))
5.创建实例
可以创建一个自定义实例应用于多个请求接口
const HTTP = axios.create({
baseURL: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo'
})
通过这个实例发起请求可以简写掉实例中定义的baseURL
created () {
HTTP.get('/course/list').then((response) => console.log(response))
}
实例中的相关配置：
-
url是用于请求的服务器 URL -
method是创建请求时使用的方法，默认是 get -
baseURL将自动加在url前面，除非url是一个绝对 URL，可以通过设置一个baseURL便于为 axios 实例的方法传递相对 URL -
transformRequest允许在向服务器发送前，修改请求数据，只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法，后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
-
transformResponse在传递给 then/catch 前，允许修改响应数据 -
headers是即将被发送的自定义请求头 -
params是即将与请求一起发送的 URL 参数 -
data是作为请求主体被发送的数据 -
timeout指定请求超时的毫秒数(0 表示无超时时间)，如果请求花费了超过timeout的时间，请求将被中断 -
withCredentials表示跨域请求时是否需要使用凭证，默认是false -
auth表示应该使用 HTTP 基础验证，并提供凭据，这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
-
responseType表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'，默认是json -
onUploadProgress允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
-
onDownloadProgress允许为下载处理进度事件 - 'proxy' 定义代理服务器的主机名称和端口，
auth表示 HTTP 基础验证应当用于连接代理，并提供凭据，这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
我们挑两个选项举例：
1.timeout，设置超时时间，如果请求超过了设置的这个时间，请求会被中断
const HTTP = axios.create({
baseURL: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo',
timeout: 10
})
请求超过10毫秒就会被中断
2.headers，用来设置请求头
const HTTP = axios.create({
baseURL: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo',
timeout: 1000,
headers: {'name': 'xiaoqiang'}
})
6.拦截器
拦截器的作用是可以让我们在请求或者响应在then或者catch处理之前做些事情
<script type="text/javascript">
import axios from 'axios'
const HTTP = axios.create({
baseURL: 'https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo',
timeout: 1000,
headers: {'name': 'xiaoqiang'}
})
// 添加请求拦截器
HTTP.interceptors.request.use((config) => {
// 在请求发送前需要做的事情
console.log('加载一张菊花图')
return config
}, (err) => {
// 请求错误了可以做些别的事情
return Promise.reject(err)
})
HTTP.interceptors.responese.use((response) => {
// 在响应发送前需要做的事情
console.log('关掉一张菊花图')
return response
}, (err) => {
// 请求错误了可以做些别的事情
return Promise.reject(err)
})
export default {
created () {
HTTP.get('/course/list').then((response) => console.log(response))
}
}
</script>
<style scoped>
</style>
7.作为vue的全局引用插件使用
在vue中，我们不需要在每个组件中都去引入axios，这样使用起来比较麻烦，我们可以结合插件vue-axios，让操作更简化
1.安装插件
npm install vue-axios --save
2.在入口文件main.js中引入模块，并挂载插件
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
3.在组件中就可以直接直接通过this.axios去发请求
this.axios.get('https://easy-mock.com/mock/5c23887d3671d47be5ea8d66/axiosdemo/course/list').then((response) => {
console.log(response)
})
8.通过Axios拿取指定数量的数据
有时候我们并不会使用到从后端拿到的全部条数的数据，所以我们对数据进行一些前端处理
1.获取的数据是完整的，但是复制给本地的时候只取前六条
async getPlayListData() {
const { data } = await axios.get("/api/personalized");
if (data.code === 200) {
this.playListData = data.result.slice(0, 6);
}
}
2.获取数据的时候就限制数量，这种方法需要和后端约定好接口才可以
async getArtistsData() {
const { data } = await axios.get("/api/top/artists?limit=10");
if (data.code === 200) {
this.artistsData = data.artists;
}
}
