Vue封装Axios
axios是一个基于Promise的HTTP请求库,它可以在浏览器和Node.js中使用。axios的功能非常请打,支持Promise API、可以拦截请求和响应、可以转换请求和响应数据、支持取消请求、可以自动转换JSON数据等。
-
安装Axios
shnpm install axios -S
-
封装Axios
jsimport axios from 'axios' /* 请求的Content-Type要和后台对应 formdata格式可以使用qs或者querystring 推荐qs qs安装指令: npm install qs -S querystring安装指定: npm install querystring -S 安装之后请求拦截的时候处理一个data格式就行 example: if(config.method === 'post') config.data = qs.stringity(config.data); */ const errorHandle = (status,info) => { switch(status){ case 400: console.log("语义有误"); break; case 401: console.log("服务器认证失败"); break; case 403: console.log("服务器拒绝访问"); break; case 404: console.log("地址错误"); break; case 500: console.log("服务器遇到意外"); break; case 502: console.log("服务器无响应"); break; default: console.log(info); break; } } // 创建实例 const Service = axios.create({ // 请求地址 baseURL: process.env.VUE_APP_BASE_API, // 配置请求头 // headers: { // 'Content-Type': 'application/json;charset=utf-8' // 'Content-Type': 'application/x-www-form-urlencoded' // }, // 超时时间 timeout: 20000 }); // 请求拦截 Service.interceptors.request.use(config => { if(sessionStorage.getItem('token')) config.headers['token'] = sessionStorage.getItem('token'); return config; }, error => { console.error('Request Error:', error); return Promise.reject(error); }); // 响应拦截器 Service.interceptors.response.use(response => { if (response.status === 200 && response.data.code === 200) return Promise.resolve(response.data); else return Promise.reject(response.data); }, error => { console.log('Response Error:', error); const { response } = error; errorHandle(response.status,response.info) return Promise.reject(error); }); export default Service;
-
(可选)封装路径
js// path.js const base = { baseUrl:"http://iwenwiki.com", chengpin:"/api/blueberrypai/getChengpinDetai ls.php" } export default base;
js// index.js import path from "./path" import axios from "../utils/request" export default { getChengpin(){ return axios.get(path.baseUrl + path.chengpin) } }
-
常用API封装
-
get(url[, config])
发送get请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
delete(url[, config])
发送delete请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
head(url[, config])
发送head请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
options(url[, config])
发送options请求。url是请求的url,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
post(url[, data[, config]])
发送post请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
put(url[, data[, config]])
发送put请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
patch(url[, data[, config]])
发送patch请求。url是请求的url,data是请求的数据,config是可选的配置对象,用于设置请求的各种选项,如请求头和超时时间。返回一个Promise对象,响应结果包含在其中。
-
request(config)
发送自定义请求。config是请求的配置对象,包含请求的各种选项,如请求url、方法、数据、请求头等。返回一个Promise对象,响应结果包含在其中。
jsimport Service from './config' export const AGet = config => Service({...config, method: 'get', params: config.data}); export const ADelete = config => Service({...config, method: 'delete', params: config.data}); export const AHead = config => Service({...config, method: 'head', params: config.data}); export const AOptions = config => Service({...config, method: 'options', data: config.data}); export const APost = config => Service({...config, method: 'post', data: config.data}); export const APut = config => Service({...config, method: 'put', data: config.data}); export const APatch = config => Service({...config, method: 'patch', data: config.data}); export const ARequest = config => Service({...config, method: 'request', data: config.data});
-
-
Axios 常用的请求配置项
- url (类型: string, 必填): HTTP 请求的服务器地址
- method (类型: string, 默认: get): HTTP 请求方法
- data (类型: Object, Array): 要发送的数据
- params (类型: Object): 作为查询字符串添加到请求 URL 中的参数, 用于 GET, HEAD 和 DELETE 请求。
- headers (类型: Object): HTTP 请求的头部信息
- timeout (类型: number): 请求超时时间,单位为毫秒,默认为 0,即没有超时时间。
- responseType (类型: string): 响应数据的格式, 默认是 json
- transformRequest (类型: Function): 对请求数据进行任意转换函数,函数接受传递的参数为请求核心对象
- transformResponse (类型: Function): 对响应数据进行任意转换函数,函数接受传递的参数为响应核心对象
- validateStatus (类型: Function): 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise ;如果 validateStatus 返回 true (或者设置为 null 或undefined), 则promise 将会 resolved,否则是 rejected。
-
跨域问题
所谓跨域,指的是在客户端(浏览器)发起请求时,请求的目标资源位于另一个域名/端口/协议上,就是跨域。在跨域场景下,浏览器为了保护用户隐私和安全,通常会限制页面在未经允许的情况下访问跨域的资源。常见的跨域场景包括:
0. 不同域名之间的跨域访问(如 www.example.com 访问 api.example.com)- 同一服务器使用不同端口号(如 80 和 8080)的跨域访问
- HTTP 和 HTTPS 之间的跨域访问
- 不同域名之间使用不同的协议(如 http 和 https)的跨域访问
跨域访问的实现需要符合同源策略(Same-Origin Policy),即只允许源(协议、域名、端口)相同的网页脚本进行交互操作,否则浏览器会阻止跨域操作,保护用户安全。在跨域的情况下,通常可以通过一些手段来解决,如 CORS(跨域资源共享)等。
在Vue3中遇到跨域问题时,可以通过在vue.config.js中进行配置来解决。需要在vue.config.js中添加proxy选项,如下所示:
js// vue.config.js export default { server: { proxy: { // 在此处为需要解决跨域的 API 配置代理 '/api': { target: 'http://localhost:3000', changeOrigin: true, rewrite: path => path.replace(/^/api/, '') // 去掉 /api 前缀 } } } }
基础使用
get请求
js
axios({
method: "get",
url: "http://iwenwiki.com/api/blueberrypai/getChen gpinDetails.php"
}).then(res => {
console.log(res.data);
})
axios.get("http://iwenwiki.com/api/blueberryp ai/getChengpinDetails.php").then(res =>{
console.log(res.data);
})
post请求
js
axios({
method:"post",
url:"http://iwenwiki.com/api/blueberrypai/l ogin.php",
data:qs.stringify({
user_id:"iwen@qq.com",
password:"iwen123",
verification_code:"crfvw"
})
}).then(res =>{
console.log(res.data);
})
axios.post("http://iwenwiki.com/api/blueberry pai/login.php", qs.stringify({
user_id: "iwen@qq.com",
password: "iwen123",
verification_code: "crfvw"
})).then(res => {
console.log(res.data);
})