axios网络请求 · 常用笔记

# axios网络请求 # 特点 - 在浏览器中发送XMLHttpRequests请求 - 在node.js中发送http请求 - 支持Promise API - 拦截请求和响应 - 转换请求和响应数据 - 等等 **安装** ``` <pre class="calibre13">``` npm install axios --save ``` ``` # 实例默认get请求 ``` <pre class="calibre13">``` ~~~ axios({ url: 'http://httpbin.org/get' }).then(res => { console.log(res); }) ~~~ ``` ``` post请求： ``` <pre class="calibre13">``` ~~~ axios({ url: 'http://httpbin.org/post', method: 'post' }).then(res => { console.log(res); }) ~~~ ``` ``` # 提交参数方式： get 和params对应 post和data对应 ``` <pre class="calibre13">``` axios({ url: 'http://httpbin.org/get?id=2', method: 'get' }).then(res => { console.log(res); }) ``` ``` ``` <pre class="calibre13">``` axios({ url: 'http://httpbin.org/get', method: 'get', params: { uid: '11', age: 18 } }).then(res => { console.log(res); }) ``` ``` ``` <pre class="calibre13">``` axios({ url: 'http://httpbin.org/post', method: 'post', data:{uid:12,age:18} }).then(res => { console.log(res); }).catch(err =>{ console.log(err); }) ``` ``` ``` <pre class="calibre13">``` // 并发请求 axios.all([axios({ url: 'http://httpbin.org/get', method: 'get', params:{username: '张三', age: 18} }),axios({ url: 'http://httpbin.org/post', method: 'post', data: {username: '李四',age: 20} })]).then(results => { console.log(results); }) ``` ``` ``` <pre class="calibre13">``` // 并发请求 axios.all([])返回的结果是一个数组，使用axios.spread可将数组【res1,res2】展开为res1,res2 axios.all([axios({ url: 'http://httpbin.org/get', method: 'get', params:{username: '张三', age: 18} }),axios({ url: 'http://httpbin.org/post', method: 'post', data: {username: '李四',age: 20} })]).then(axios.spread((res1,res2) => { console.log(res1); console.log(res2); }) ) ``` ``` # axios全局配置 ``` <pre class="calibre13">``` // 并发请求并全局配置 axios.defaults.baseURL = 'http://httpbin.org'; axios.defaults.timeout = 5000; //单位毫秒 axios.all([axios({ url: '/get', method: 'get', params:{username: '张三', age: 18} }),axios({ url: '/post', method: 'post', data: {username: '李四',age: 20} })]).then(axios.spread((res1,res2) => { console.log(res1); console.log(res2); }) ) ``` ``` 上面是使用全局的axios和对应的配置进行网络请求如果分布式服务器发送不同的服务器就不能那么用了需要使用实例： ``` <pre class="calibre13">``` //创建axios实例： const instance1 = axios.create({ baseURL: 'http://httpbin.org', timeout: 5000 }) const instance2 = axios.create({ baseURL: 'http://expressjs.jser.us', timeout: 5000 }) // 使用实例 instance1({ url :'/get', method: 'get', params: {username: '张三',age: 18} }).then(res => { console.log(res); }) instance1({ url: '/post', method: 'post', data: {username: '李四',age: 20} }).then(res => { console.log(res); }) instance2({ url: '/', method: 'get' }).then(res => { console.log(res) }) ``` ``` ``` <pre class="calibre13">``` //把第三方模块进行封装防止后期不更新或者难维护 ``` ``` 首先在根目录新建一个network文件夹里面创建request.js文件 ``` <pre class="calibre13">``` // 封装axios模块 import axios from "axios"; export function myrequest(config,successCallback,errorCallback) { //1.创建axios实例 const instance = axios.create({ baseURL: 'http://httpbin.org', timeout: 5000 }) instance(config) .then(res => { successCallback(res) }) .catch(err => { errorCallback(err) }) } ``` ``` 使用回调函数（successCallback,errorCallback可自定义名字）把结果返回过去没有使用export default 用的export function 因为怕以后不是封装的一个方法前面需要用到的页面进行调用： ``` <pre class="calibre13">``` import {myrequest} from "./network/request"; ``` ``` ``` <pre class="calibre13">``` //把第三方模块进行封装防止后期不更新或者难维护 myrequest({ url :'/get', method: 'get', params: {username: '张三',age: 18} },res => { console.log(res); },err => { console.log(err); }) ``` ``` 最优方案一： request.js 源码 ``` <pre class="calibre13">``` // 封装axios模块 import axios from "axios"; export function myrequest(config) { return new Promise((resolve, reject) => { //1.创建axios实例 const instance = axios.create({ baseURL: 'http://httpbin.org', timeout: 5000 }) instance(config) .then(res => { resolve(res) }) .catch(err => { reject(err) }) }) } ``` ``` 调用界面源码： ``` <pre class="calibre13">``` import {myrequest} from "./network/request"; ``` ``` ``` <pre class="calibre13">``` //把第三方模块进行封装防止后期不更新或者难维护 myrequest({ url :'/get', method: 'get', params: {username: '张三',age: 18} }).then(res => { console.log(res); }).catch(err => { console.log(err); }) ``` ``` # axios 请求拦截器 ``` <pre class="calibre13">``` // 挂载axios 拦截器过滤请求 axios.interceptors.request.use(config => { console.log(config) config.headers.Authorization = window.sessionStorage.getItem('token') // 在最后必须return config return config }) ``` ``` # 传递数据给java ``` <pre class="calibre14">``` import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import axios from 'axios' Vue.config.productionTip = false new Vue({ router, store, render: h => h(App) }).$mount('#app') // 创建axios实例 const instance = axios.create({ // baseURL: 'api', timeout: 5000 }) const param = new URLSearchParams() // param.append('levyId', '34156') // http://mer.bjlinggong.com/trans-business/clientBusiness/common.do // http://api.youfupingtai.com/pctrans-business/clientBusiness/common.do param.append('daxiongUrl', 'https://apiservice.daxiongys.com/clientBusiness/common.do') param.append('priKey', 'MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAK8Nig8CP02X2qW2W6hs2XKRe/5x3EBDeT76q3caRlF1AvXRPuTG2yP1yDOIDR+Lb8hoHTLbWZ35undaYU8a+1g5yBmSPLbi5xtMNjIqNcn16TYp6qmdAGDQ923QEo1DEyKLczZk2lQBHhdQ7vrcAGzI4DsS4xdm6fr5FJ9cKkzTAgMBAAECgYEAqxS+YuC9YWYRyHaqqbaH5dKNriU1LpFDA+wUe7hwFNgY5olzwD8gmMpyuPo0aSnrO5+VOcjqktwoAtGP3LHwBbGukHCKMp7Dw1g6Rbac/4EXXsj2Z3hKxlm3MWo7Z4SgHAZ8PURuQtu8WRR3zCdZMORqxdbOUV8EqpjIORs+9aECQQDZ3GMFGHccYprYr1X6zlxXVOU75GHTWIMclbE9mzcFhmhaO2Jj1QW2BNxwI4RxA/6PphPZQc4BKTGxTb3NF43JAkEAzbKtWqaG1go4ihxV5wy4+/V7EEPYukputZlBt+njbQ7e/DHHIaEPGkzDMT2MBTx1prwlikU40CZZM7/Om5ljuwJAHZeoA5stIrfqHKDEZwr81Af+E0KUXybYuFtE9f9NW/zD0+3ZEYJwAidq4fiRFuDaBR0j+RDNMK8txs2uiFs4sQJAeIymm+HMU9RZnldM4MPMBZ2wKbAZa9QDXdobcbVY26lDdXmWwlapizhBjLINRWRRbw4E0iwPR62xyWo3o2kZ0QJAOO6s5fbwLlQ1CfNoafeZcmvBaHiz85YTwcKlmPcVdvXuK+wT7+b9uI5vYpdJiIywdMTMS1yJcNiHp06C/ECOkw==') param.append('pubKey', 'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCXFtJNcCv9X+pfOz+jy4WO+7KC0tdtDGfW/XrJOFn6mTR/TpJrsLzwssTyj0hDfUla1xDCbAWlUEkzb64jsPKk9WACupLOOrnEy7NuG0O5jg36UXle+m5/uDm8B/KGV9BQmEt+EOIbl2IzNYS4GflkbCTtkbzMc+DXetl3IHM1+wIDAQAB') param.append('charset', 'utf-8') param.append('apiKey', 'RYUL8FOAYPZK5VPKHDSTJ2XP83LJ6NAQ') param.append('merId', '89900000772816245891') param.append('reqId', '1624605422566a1j8Htzy') param.append('startDate', '2021-06-25') param.append('endDate', '2021-06-25') instance({ url: '/daxiong/chongzhiQuery', method: 'post', data: param }).then(res => { console.log(res) }).catch(err => { console.log(err) }) ``` ```