温州做网站多少钱,汽车设计公司排名前十强,怎样做营销型网站,合肥网站快速优化排名文章目录 一、axios是什么#xff1f;二、使用步骤2.1 下载2.2 引入2.3 使用Get请求Post请求Forms 三、封装 一、axios是什么#xff1f;
Axios 是一个基于 promise 网络请求库#xff0c;作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和no… 文章目录 一、axios是什么二、使用步骤2.1 下载2.2 引入2.3 使用Get请求Post请求Forms 三、封装 一、axios是什么
Axios 是一个基于 promise 网络请求库作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
二、使用步骤
2.1 下载
npm install axios -S2.2 引入
import axios from axios2.3 使用
Get请求
import axios from axios
// 向给定ID的用户发起请求
axios.get(/user?ID12345).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?ID12345);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/requestexport 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);
}
