1、基础用法
下载axios:
npm install axios --save
或者使用淘宝镜像下载:
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install axios --save
在main.js中:
// 导入axios
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1'
//设置网络请求超时
axios.defaults.timeout = 10000;
Vue.prototype.$http = axios
然后在页面中就可以使用:
//这种写法为es6新写法(解构赋值):将右边的data赋值给左边的data,然后重新命名为res
let { data : res} = this.$http.post('访问路径',{参数})
console.log(res)
let { data : res} = this.$http.get('访问路径')
let { data : res} = this.$http.put('访问路径',{参数})
let { data : res} = this.$http.delete('访问路径',{参数})
2、axios拦截器
在main.js中:
// axios请求拦截器(请求之前干点什么)
axios.interceptors.request.use(
config => {
if (window.sessionStorage.getItem('token')){
//在头信息中添加{ Authorization :token }
config.headers.Authorization = window.sessionStorage.getItem('token')
}
return config
},
error => {
console.log('Error' + error);
}
)
//axios响应拦截器(对响应数据做点什么)
axios.interceptors.response.use(
response => {
},
error => {
}
)
3、简单封装
在src下新建一个utils文件夹,然后在这个文件夹下新建两个文件request.js和api.js
在request.js中封装axios:
import axios from 'axios'
// import ElementUI from 'element-ui'
// 配置请求的根路径
axios.defaults.baseURL = 'https://www.liulongbin.top:8888/api/private/v1'
// 请求超时
axios.defaults.timeout = '10000'
// post请求的头信息
axios.defaults.headers.post['content-Type'] = 'application-x-www-form-urlencode'
// 请求拦截器
axios.interceptors.request.use(
config => {
if (window.sessionStorage.getItem('token')){
config.headers.Authorization = window.sessionStorage.getItem('token')
}
return config
},
error => {
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
if (response.status === 200){
return Promise.resolve(response)
} else {
return Promise.reject(response)
}
},
error => {
return Promise.reject(error)
}
)
export default axios
在api,js中统一管理api:
import request from './request'
export function login(param){
return request({
url:'login',
method:'post',
params:param
})
}
export function user(param){
return request({
url:`users`,
method:'get',
data:param
})
}
在页面中使用:
<script>
import { login } from '@/common/utils/api.js'
export default {
data() {
return {
loginForm: {
username: '',
password: ''
}
}
},
methods: {
// 登录
login(formName) {
// 表单预验证
this.$refs[formName].validate(async (valid) => {
if (!valid) return false
//调用api
login(this.loginForm).then((res)=>{
console.log(res);
})
})
},
}
</script>
最后 ,附上一篇大神讲的封装axios的:点击此处查看