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)
# mysql # 数据库 # database
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue