axios在vue中的使用

---

一、axios是什么？

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

二、使用步骤

2.1 下载

npm install  axios -S

2.2 引入

import axios from 'axios'

2.3 使用

Get请求

import axios from 'axios'
// 向给定ID的用户发起请求
axios.get('/user?ID=12345').then(function (response) {// 处理成功情况console.log(response);}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).finally(function () {// 总是会执行});  // 支持async/await用法
async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.error(error);}
}

Post请求

发起一POST请求

axios.post('/user',{firstName:'Fred',lastName:'Flintstone'
}).then(function(response){console.log(response);
}).catch(function(error)){console.log(error);
}

发起多个并发请求

function getUserAccount() {return axios.get('/user/12345');
}function getUserPermissions() {return axios.get('/user/12345/permissions');
}const [acct, perm] = await Promise.all([getUserAccount(), getUserPermissions()]);// ORPromise.all([getUserAccount(), getUserPermissions()]).then(function ([acct, perm]) {// ...});

将HTML Form 转换JSON进行请求

const {data} = await axios.post('/user', document.querySelector('#my-form'), {headers: {'Content-Type': 'application/json'}
})

Forms

Multipart (multipart/form-data)

const {data} = await axios.post('https://httpbin.org/post', {firstName: 'Fred',lastName: 'Flintstone',orders: [1, 2, 3],photo: document.querySelector('#fileInput').files}, {headers: {'Content-Type': 'multipart/form-data'}}
)

URL encoded form (application/x-www-form-urlencoded)

const {data} = await axios.post('https://httpbin.org/post', {firstName: 'Fred',lastName: 'Flintstone',orders: [1, 2, 3]}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})

三、封装

在src下创建utils目录，在该目录下创建文件 request.js

import axios from "axios";
import router from '../router/index'
// 1、创建axios对象
const service = axios.create({baseURL: 'http://localhost:9090/drsm',
});
//2、请求拦截器 
service.interceptors.request.use(config => {//在headers中加入认证信息。// if(token){//        config.headers['Token'] = token//    }return config
}, error => {Promise.reject(error);
})//响应拦截器
service.interceptors.response.use((response) => {//console.log(response);const {data} = response;if (data.code === 200 || data.code === 201) {//回传的数据return data;} else {return Promise.reject(new Error(data.message))}},error => {let msg;//console.log(error);if (error.response) {switch (error.response.status) {case 500:msg = "500-服务器发生错误，请及时联系管理员"break;case 404:msg = "404-你访问的页面不存在"break;case 401:msg = "401-请先登录系统，再完成操作"break;case 403:msg = "403-额...没有权限访问"breakdefault:msg = "555-发生错误，请及时联系管理员"break;}//登录界面发生错误时不跳转到错误页，if(error.config.url=='/login'){return Promise.reject(new Error(msg))}router.push({path: '/error',query: {msg: msg}});} else {msg = "连接不到目标服务器"}return Promise.reject(new Error(msg))}
)export default service;

在utils下创建api目录，接着创建文件 course.js

import qs from 'qs'
import service from '@/utils/request'export function loginReq(name, pwd) {const data = {username: name,password: pwd};return service.post('/login',qs.stringify(data));
}export function addUserReq(user){return service.post('/addUser',qs.stringify(user));
}export function userExist(username){let url = '/userExist/'+username;return service.get(url);
}