目录
Axios 介绍:
- 基于promise用于浏览器和node.js的http客户端
- 支持浏览器和node.js;
- 支持promise;
- 能拦截请求和响应请求;
- 自动转换JSON数据;
- 能转换请求和响应数据;
引入:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios基本用法:
- get和delete请求传递参数
1 发送get 请求 axios.get('http://localhost:3000/adata').then(function(ret){ // 拿到 ret 是一个对象 所有的对象都存在 ret 的data 属性里面 // 注意data属性是固定的用法,用于获取后台的实际数据 // console.log(ret.data) console.log(ret) }) axios delete 请求传参 传参的形式和 get 请求一样 axios.delete('http://localhost:3000/axios', { params: { id: 111 } }).then(function(ret){ console.log(ret.data) })
-
通过传统的url以?的形式传递参数
2.1 通过传统的url 以 ? 的形式传递参数 axios.get('http://localhost:3000/axios?id=123').then(function(ret){ console.log(ret.data) })
-
restful形式传参
2.2 restful 形式传递参数 axios.get('http://localhost:3000/axios/123').then(function(ret){ console.log(ret.data) })
-
通过params形式传递参数
2.3 通过params 形式传递参数 axios.get('http://localhost:3000/axios', { params: { id: 789 } }).then(function(ret){ console.log(ret.data) })
-
- post和put请求传递参数
4 axios 的 post 请求 4.1 通过选项传递参数 axios.post('http://localhost:3000/axios', { uname: 'lisi', pwd: 123 }).then(function(ret){ console.log(ret.data) })
-
通过选项传递参数
4.2 通过 URLSearchParams 传递参数 var params = new URLSearchParams(); params.append('uname', 'zhangsan'); params.append('pwd', '111'); axios.post('http://localhost:3000/axios', params).then(function(ret){ console.log(ret.data) })
-
通过URLSearchParams传递参数
5 axios put 请求传参 和 post 请求一样 axios.put('http://localhost:3000/axios/123', { uname: 'lisi', pwd: 123 }).then(function(ret){ console.log(ret.data) })
-
axios全局配置:
//配置公共的请求头
axios.defaults.baseURL = 'https://127.0.0.1:3000/api'
// 配置超时时间
axios.defaults.timeout = 3000;
// 配置公共请求头
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
//配置公共的post的Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios拦截器:
- 请求拦截器:
请求拦截器的作用是在请求发送前进行一些操作, 例如:在每个请求体中加上token,统一做了处理 后要改也很简单 //1.请求拦截器 axios.interceptors.request.use(function(config){ console.log(config.url) // 任何一部都会经过这一步,在发送请求前做些什么 config.headers.mytoken = 'token字符串' // 这里一定要return 否则配置不成功 return config },function(err){ //请求错误的时候 console.log(err) })
- 响应拦截器:
响应拦截器的作用是在接收到响应后进行的一些操作, 如:在服务器返回登录状态失效,需要重新 登录的时候,跳转到登录页; //2.响应拦截器 axios.interceptors.response.use(function(res){ // 接收响应后做些什么 var data = res.data; return data; },function(err){ //打印错误 console.log(err) })
Vue 中安装 axios:
- 安装依赖:(在控制台)
npm i axios -S
- 配置:
在main.js中导入 axios import axios from 'axios' import Vue from 'vue' 在全局挂载 axios 方便在各个组件使用 Vue.prototype.$axios = axios new Vue({ render: h => h(App), }).$mount('#app')
-
对axios进行二次封装:
导入依赖 import axios from 'axios' 配置属性 const service = axios.create({ baseURL: '......', timeout: 3000, }) export default service
配置拦截器:
// 请求拦截器 // 在发送请求前 操作 service.interceptors.request.use((config) => { // 获取 并 在请求头设置 token config.headers['token'] = getToken('token') return config }, (error) => { return Promise.reject(error) }) // 响应拦截器 // 对响应数据的操作 service.interceptors.response.use((response) => { // 结构请求的数据 let { status, message } = response.data if (status !== 200) { Message({ message: message || 'error', type: 'error' }) } return response }, (error) => { return Promise.reject(error) })