axios
axios简介
网址 ：http://axios-js.com/docs/index.html
axios是基于Promise的http库，支持浏览器端和node端。
axios特点
- 从浏览器 端创建XMLHttprequests
- 从node端创建http 请求
- 支持Promise api
- 接受请求和响应
- 数据在请求和响应 之间产生
- 取消请求拦截
- 自动转换json数据
- 通过客户端可以防御XSRF攻击
安装及配置
- npm
npm i axios -S 或者 npm i axios --save
- cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
开启服务端
1.启动数据库
1.mysql -uroot -p密码 #进入mysql数据库
2.create database shop0803; #创建shop0803库
3.use shop0803； #使用库
4.source shop_db_有数据.sql的磁盘绝对路径； #导入表结构及数据
5.exit； #退出数据库
2.开启服务端
1.shop-api
config
global.js
// 数据库连接参数
exports.dbConfig = {
host: 'localhost', //主机名
user: 'root', //用户名
password: '', //密码
port: 3306, //端口号
database: '' ,// 数据库名字
timezone:"SYSTEM"
}
2.启动服务端: npm start
3.项目运行在: http://localhost:3000
3.开启客户端
1.客户端项目u-shop
2.npm run serve
3.客户端项目运行在: 'http://localhost:8080'
配置本地代理
- 创建vue.config.js文件。
- 在设置代理请求设置后端端口url,将会作用在axios的url地址中。
- 注意这里改变后需重启项目。
方式一:
module.exports = {
//部署目录是的基本url
publicPath:"",
//build是构建文件的目录
outputDir:'dist',
//build是放置生成的静态资源(css js img)的目录
assetsDir:'static',
//指定生成的index.html
indexPath:'index.html',
//设置代理请求
devServer:{
proxy:"http://localhost:3000"//将会作用在axios的url地址中。
}
}
重启项目:npm run serve
方式二:
module.exports = {
//部署目录是的基本url
publicPath:"",
//build是构建文件的目录
outputDir:'dist',
//build是放置生成的静态资源(css js img)的目录
assetsDir:'static',
//指定生成的index.html
indexPath:'index.html',
//设置代理请求
devServer:{
proxy:{
"/api":{
target:"http://localhost:3000",//目标地址
ws:true,//webSocket长连接
changeOrigin:true,//是否跨域
pathRewrite:{//路径重写
"^/api":"http://localhost:3000"//将会作用在axios的url地址中。
}
}
}
}
}
重启项目:npm run serve
axios请求方式
get
//方式一:
axios({
url:'',//地址
method:'get',//请求方式
params:'请求数据',
headers:{}
}).then(res=>{
//服务端响应的数据
}).catch(e=>{
//接受异常错误信息
})
//方式二
axios.get('地址',{params:{id:1}, headers:{}}).then(res=>{
//服务端响应的数据
})
post
- data可以为对象，也可以是字符串。
//方式一:
axios({
url:'地址',
method:'post',
data:'表单提交数据',//json数据
params:'请求数据',//序列化数据
headers:{},
}).then(res=>{
//服务端响应数据
})catch(e=>{
//接受异常错误信息
})
//方式二:
axios.post('url',data,//data为参数可以字符串，可以对象。
{
params:{},//序列化参数
Headers:{"Content-Type":"application/x-www-form-urlencoded"}
}).then(res=>{
//服务端响应数据
}).catch(e=>{
//接受异常错误信息
})
axios引入
全局引入
- main.js
import axios from 'axios';
Vue.prototype.$axios = axios;
- 页面组件中
export default {
data(){
return {
cate:[],//首页分类
}
},
mounted(){
// 全局发起首页分类请求
this.$axios.get('/api/getcate').then(res=>{
if(res.data.code === 200){
this.cate = res.data.list;
}
})
}
}
局部引入
- 页面组件中
import axios from 'axios';
export default {
data(){
return {
banner:[],//轮播图
}
},
mounted(){
// 发起轮播图请求
axios.get('/api/getbanner').then(res=>{
if(res.data.code === 200){
this.banner = res.data.list;
}
})
}
}
axios的基本应用
post请求
export default {
data(){
return{
user:{
phone:'',//手机号
nickname:'',//昵称
password:'',//密码
}
}
},
methods:{
reg(){
// 发起post请求
if(this.user.phone !== ''){
this.$axios.post('/api/register',this.user,{
"Content-Type":"application/x-www-form-urlencoded"
}).then(res=>{
if(res.data.code === 200){
// 1.消息提示
alert(res.data.msg);
// 2.跳转登录
this.$router.push('/login')
}
})
}
}
}
}
参数序列化(无文件)
- qs模块
作用:将表单数据进行参数序列化操作
cnpm i qs -S
import qs from 'qs'
export default {
data(){
return{
user:{
phone:'',//手机号
nickname:'',//昵称
password:'',//密码
}
}
},
methods:{
reg(){
let params = qs.stringify(this.user);
log(params)//查询字符串
}
}
}
参数序列化(有文件)
假设表单提交的数据为params
params = {
nickanme:''.
password:'',
File:{}
}
通过FormData来处理带有文件的表单数据
let data = new FromData();
for(let k in params){
data.append(k,params[k]);
}
//将实例发送。
this.$axios.post('地址',data,{
headers:{
"Content-type":"multiple/form-data"
}
}).then(res=>{
//服务端响应的结果数据
})
自定义创建axios (axios.create())
- main.js
const instance = axios.create({
baseURL: 'http://localhost:3000', //基础路径
timeout: 1000, //请求时长
})
Vue.prototype.$instance = instance;
- 首页商品分类
export default {
mounted(){
//自定义axios发起首页商品分类请求
this.$instance.get('/api/gethortgoods').then(res=>{
if(res.data.code === 200){
console.log(res.data.list);
this.indexGoods = res.data.list;
}
})
}
}
执行多个并发请求
axios.all([]): 发起并发请求
axios.spread(()=>{}): 接受并发请求的结果
Home.vue
export default {
methods:{
getBanner(){
return this.$axios.get('/api/getbanner')
},
getCate(){
return this.$axios.get('/api/getcate')
},
getIndexGoods(){
return this.$axios.get('/api/gethortgoods')
}
},
mounted(){
// 发起并发请求[轮播图,首页商品分类,首页商品信息]
this.$axios.all([this.getBanner(),this.getIndexGoods(),this.getCate()])
.then(this.$axios.spread((banner,indexGoods,cate)=>{
console.log(banner);
console.log(indexGoods);
console.log(cate);
}))
}
}
配置代理二
methods:{
getBanner(){
//这里因为配置代理文件中将路由改了，因此 '/api' === "http://localhost:3000"
return this.$axios.get('/api/api/getbanner')
},
getCate(){
return this.$axios.get('/api/api/getcate')
},
getIndexGoods(){
return this.$axios.get('/api/api/gethortgoods')
}
},
mounted(){
this.$axios.all([this.getBanner(),this.getIndexGoods(),this.getCate()])
.then(this.$axios.spread((banner,indexGoods,cate)=>{
console.log(banner);
// console.log(indexGoods);
// console.log(cate);
}))
}
}
axios拦截器
axios.interceptors.request.use(成功回调，失败回调);
axios.interceptors.response.user(成功回调，失败回调);
- axios拦截器成功回调中必须有返回值将形参返回。
- axios拦截器失败回调中必须有返回值且返回值为Promise.reject(形参)
请求拦截器
const config = axios.interceptors.request.use(config=>{
console.group('本次请求的地址为:',config.url)
// 设置请求头,验证token,token:令牌
console.log(config);
return config
},err=>{
// 请求失败
return Promise.reject(err)
})
- 响应拦截器
const response = axios.interceptors.response.use(res=>{
console.group('本次响应的地址为',res.config.url);
//例子: 统一处理服务端返回的状态码
console.log(res);
return res;
},err=>{
// 响应失败
return Promise.reject(err)
})
- 取消拦截器
// 取消请求拦截器
axios.interceptors.request.eject(config)
axios.interceptors.response.eject(response)
请求层的封装
get请求
import axios from 'axios'
let baseURL = null;
// 1.处理环境是否是开发环境还是生产环境
if(process.env.NODE_ENV === 'development'){
//表示开发环境
baseURL = "/api";// /api ==== http://localhost:3000
}else if(process.env.NODE_ENV === 'production'){
// 表示生产环境
baseURL = '';
}
// 2.创建自定义axios对象
const instance = axios.create({
baseURL,
timeout:1000,
})
// 增加请求拦截器
instance.interceptors.request.use(config=>{
console.group('本次请求的地址为:',config.url)
// 处理token验证
return config
})
// 增加响应拦截器
instance.interceptors.response.use(res=>{
console.group('本次响应的地址为:',res.config.url)
// 统一打印数据, 统一处理响应失败的数据
console.log(res.data);
return res
})
//参数一:请求的url地址
//参数二:传递的参数, 可选
export function get(url,params = null){
// 实例化Promise
//接受参数为:function
return new Promise((resolve,reject)=>{
instance.get(url,{params}).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
})
}
post请求
// post
/**
* post请求
* 参数一:url地址
* 参数二:params参数
* 参数三:是否上传文件
*/
export function post(url,params,isFile = false){
// 处理params参数,进行序列化操作
let data = qs.stringify(params);
// 处理请求头
let config = {
headers:{
"Content-Type":"application/x-www-form-urlencoded"
}
}
// 处理文件
if(isFile){
// 处理params参数,使用FormData进行参数序列化操作
data = new FormData();
for(let i in params){
data.append(i,params[i])
}
// 处理请求头
config = {
headers:{
"Content-Type":"multiple/form-data"
}
}
}
return new Promise((resolve,reject)=>{
// 发起异步请求操作
instance.post(url,data,config).then(res=>{
resolve(res.data)
}).catch(err=>{
reject(err.data)
})
})
}
api.js
import {get, post} from './http'
// 封装轮播图接口
export const getBanner = ()=>get('/api/getbanner')
// 封装首页分类接口
export const getCate = ()=>get('/api/getcate')
// 获取首页商品信息
export const getIndexGoods = ()=>get('/api/gethortgoods')
// 封装注册接口
export const getReg = (data)=>post('/api/register',data)
//封装登录接口
export const getLogin = (data)=>post('/api/login',data)
3856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
