博客
关于我
Vue中axios的使用
阅读量:266 次
发布时间:2019-03-01

本文共 3164 字,大约阅读时间需要 10 分钟。

axios

1. axios框架的基本使用

  • 安装并导入

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uhinhfKm-1616674947133)(E:\学习笔记\图片\image-20201213163546979.png)]

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')axios({     url: 'http://123.207.32.32:8000/home/data',  //专门针对get请求的参数拼接  params: {       type: 'pop',    page: 1  },  methods: 'get'}).then(res => {     console.log(res)})axios({     url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',  methods: 'get'}).then(res=>{     console.log(res);})

2. axios发送并发

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')axios({     url: 'http://123.207.32.32:8000/home/data',  //专门针对get请求的参数拼接  params: {       type: 'pop',    page: 1  },  methods: 'get'}).then(res => {     console.log(res)})axios({     url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',  methods: 'get'}).then(res=>{     console.log(res);})//2.axios发送并发请求axios.all([axios({     url: 'http://123.207.32.32:8000/home/multidata'}),axios({     url: 'http://123.207.32.32:8000/home/data',  params: {       type: 'sell',    page: 5  }})])    .then(res=>{         console.log(res);      console.log(res[0]);      console.log(res[1]);    })const obj= {     name: 'kobe',  age: 12}const {   name,age}=objconst names=['qqq','www','eee']const name1=names[0]const name1=names[1]const name1=names[2]const [name1,name2,name3]=names

3. axios的配置信息相关

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HWgHRtvM-1616674947136)(E:\学习笔记\图片\image-20201213175731891.png)]

import Vue from 'vue'import App from './App.vue'import store from './store'import axios from  'axios'Vue.config.productionTip = falsenew Vue({     store,  render: h => h(App)}).$mount('#app')// axios({   //   url: 'http://123.207.32.32:8000/home/data',//   //专门针对get请求的参数拼接//   params: {   //     type: 'pop',//     page: 1//   },//   methods: 'get'// }).then(res => {   //   console.log(res)// })//// axios({   //   url: 'http://123.207.32.32:8000/home/data?type=sell&page=3',//   methods: 'get'// }).then(res=>{   //   console.log(res);// })axios.defaults.baseURL= 'http://123.207.32.32:8000'//2.axios发送并发请求axios.all([axios({     url: '/home/multidata'}),axios({     url: '/home/data',  params: {       type: 'pop',    page: 1  }})])    .then(res=>{         console.log(res);      console.log(res[0]);      console.log(res[1]);    })

4. axios拦截器的使用

import axios from "axios";export function request(config,success,failure) {       //1.创建axios实例    const instance= axios.create({           baseURL: 'http://123.207.32.32:8000',        timeout: 5000    })    //2.axios的拦截器    //2.1 请求拦截的作用    instance.interceptors.request.use(config => {           console.log(config);        //1.比如config中的一些信息不符合服务器的要求        //2.比如每次发送网络请求时,都希望在界面中显示一个请求的图标        //3.某些网络请求(比如登录token)必须携带一些特殊的信息        return config    },error => {           console.log(err);    })    //2.2 响应拦截    instance.interceptors.response.use(res => {           console.log(res);    },err => {           console.log(err);    })    //3.发送真正的网络请求    instance(config)        .then(res=>{               success(res);        })        .catch(err => {               failure(err)        })}

转载地址:http://zfox.baihongyu.com/

你可能感兴趣的文章
mysql 快速自增假数据, 新增假数据,mysql自增假数据
查看>>
Mysql 批量修改四种方式效率对比(一)
查看>>
Mysql 报错 Field 'id' doesn't have a default value
查看>>
MySQL 报错:Duplicate entry 'xxx' for key 'UNIQ_XXXX'
查看>>
Mysql 拼接多个字段作为查询条件查询方法
查看>>
mysql 排序id_mysql如何按特定id排序
查看>>
Mysql 提示:Communication link failure
查看>>
mysql 插入是否成功_PDO mysql:如何知道插入是否成功
查看>>
Mysql 数据库InnoDB存储引擎中主要组件的刷新清理条件:脏页、RedoLog重做日志、Insert Buffer或ChangeBuffer、Undo Log
查看>>
mysql 数据库中 count(*),count(1),count(列名)区别和效率问题
查看>>
mysql 数据库备份及ibdata1的瘦身
查看>>
MySQL 数据库备份种类以及常用备份工具汇总
查看>>
mysql 数据库存储引擎怎么选择?快来看看性能测试吧
查看>>
MySQL 数据库操作指南:学习如何使用 Python 进行增删改查操作
查看>>
MySQL 数据库的高可用性分析
查看>>
MySQL 数据库设计总结
查看>>
Mysql 数据库重置ID排序
查看>>
Mysql 数据类型一日期
查看>>
MySQL 数据类型和属性
查看>>
mysql 敲错命令 想取消怎么办?
查看>>