From e22e48bdc75cf520e187ee6c51edcf2a260bd18c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BB=A3=E7=91=9E?= <3462909738@qq.com> Date: Thu, 7 Dec 2023 21:08:33 +0800 Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E6=9C=BA=E5=99=A8=E4=BA=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...50\344\272\272\350\201\212\345\244\251.md" | 598 ++++++++++++++++++ 1 file changed, 598 insertions(+) create mode 100644 "44\344\273\243\347\221\236/\346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md" diff --git "a/44\344\273\243\347\221\236/\346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md" "b/44\344\273\243\347\221\236/\346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md" new file mode 100644 index 0000000..02f2c29 --- /dev/null +++ "b/44\344\273\243\347\221\236/\346\234\272\345\231\250\344\272\272\350\201\212\345\244\251.md" @@ -0,0 +1,598 @@ +``` apl +一、什么是axios? +Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post请求。 +说到get、post，大家应该第一时间想到的就是Jquery吧，毕竟前几年Jquery比较火的时候，大家都在用他。但是由于Vue、React等框架的出现，Jquery也不是那么吃香了。 + +Axios特性 +1、可以在浏览器中发送 XMLHttpRequests + +2、可以在 node.js 发送 http 请求 + +3、支持 Promise API + +4、拦截请求和响应 + +5、转换请求数据和响应数据 + +6、能够取消请求 + +7、自动转换 JSON 数据 + +8、客户端支持保护安全免受 XSRF 攻击 + +二、基本使用 +测试接口一：http://123.207.32.32:8000/home/multidata +测试接口二： + +首先在我们的 vue项目中安装， +npm install axios --save + +//引入 axios +import axios from 'axios' + +//默认是get 请求 +axios({ + //需要请求的URL地址 + url: 'http://123.207.32.32:8000/home/multidata' +}).then(res => { + //输出请求成功的数据 + console.log(res); +}) + + +axios({ + url:'http://123.207.32.32:8000/home/data', + // 专门针对get请求的参数拼接 + prams:{ + type:'pop', + page:1 + } +}).then(res=>{ + console.log(res); +}) +2.1 axiox请求方式 +axios(config) +axios.request(config) +axios.get(url[, config]) +axios.delete(url[, config]) +axios.head(url[, config]) +axios.post(url[, data[, config]]) +axios.put(url[, data[, config]]) +axios.patch(url[, data[, config]]) + +三、全局配置 +在上面的示例中, 我们的BaseURL是固定的 +事实上, 在开发中可能很多参数都是固定的. +这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置 + +3.1 并发请求和全局配置 +// 配置默认信息 +axios.defaults.baseURL = 'http://123.207.32.32:8000' +axios.defaults.timeout = 5000//超时时间 毫秒 + +axios.all([axios({ + url: '/home/multidata' +}), axios({ + url: '/home/data', + prams: { + type: 'sell', + page: 5 + } + //axios.spread 对数组进行展开 +})]).then(axios.spread((res1, res2) => { + console.log(res1, res2); +})); +3.2 get请求 +四、axios的实例 +// 4.创建对应的axios实例 +const instace1 = axios.create({ + baseURL:"http://123.207.32.32:8000", + timeout:5000 +}) + +instace1({ + url:'/home/multidata' +}).then(res=>{ + console.log(res); +}) + +instace1({ + url:'/home/data', + params:{ + type:'pop', + page:1 + } +}).then(res=>{ + console.log(res); +}) + +//实例2 +const instace2 = axios.create({ + baseURL:"http://120.53.120.229:8000", + timeout:5000 +}) +五、封装 axios +import axios from 'axios' + +export function request(config) { + // 1.创建axios的实例 + const instance = axios.create({ + baseURL: "http://123.207.32.32:8000", + timeout: 5000 + }) + // 发送真正的网络请求 axios本身返回Promise 因此可以在外部 .then .catch + return instance(config) +} +六、拦截器 +axios.interceptors //这样是拦截全局的 + +注意： 不管是请求拦截，还是响应拦截，拦截了过后都需要返回 否则前台获取不到数据。 + +6.1 请求拦截 +import axios from 'axios' + +// 最终版本 +export function request(config) { + // 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 + }, err => { + console.log(err); + }); + + // 3.发送真正的网络请求 axios本身返回Promise + return instance(config) + +} + +6.2 响应拦截 +import axios from 'axios' + +// 最终版本 +export function request(config) { + // 1.创建axios的实例 + const instance = axios.create({ + baseURL: "http://123.207.32.32:8000", + timeout: 5000 + }) + + // 2.2 响应拦截 + instance.interceptors.response.use(res => { + // console.log(res); + return res.data + }, err => { + console.log(err); + }) + + // 3.发送真正的网络请求 axios本身返回Promise + return instance(config) + +} + + + +七、常见的配置选项 +请求地址 + +url: '/user', +1 +请求类型 + +method: 'get', +1 +请根路径 + +baseURL: 'http://www.mt.com/api', +1 +请求前的数据处理 + +transformRequest:[function(data){}], +1 +请求后的数据处理 + +transformResponse: [function(data){}], +1 +自定义的请求头 + +headers:{'x-Requested-With':'XMLHttpRequest'}, +1 +URL查询对象 + +params:{ id: 12 }, +1 +查询对象序列化函数 + +paramsSerializer: function(params){ } +request body +data: { key: 'aa'}, +1 +2 +3 +超时设置s + +timeout: 1000, +1 +跨域是否带Token + +withCredentials: false, +1 +自定义请求处理 + +adapter: function(resolve, reject, config){}, +1 +身份验证信息 + +auth: { uname: '', pwd: '12'}, +1 +响应的数据格式 json / blob /document /arraybuffer / text / stream + +responseType: 'json', + + +// axios +axios({ + url: '要访问的API', + method: 'get/post', // get:查询，获取 post:提交 + params:{ + 参数名:值, + 参数名:值, + 参数名:值... + } + [ data:{ + 参数名:值, + 参数名:值, + 参数名:值... + }] +}).then(function(result){ + // 成功时执行的逻辑 +}).catch(function(error){ + // 异常时执行的逻辑 +}) + +// 批量处理表单数据，需要先导入()这个库，且表单一定要有name属性 +serialize(form表单元素,{hash:true,empty:true}) // empty：包含与否空格 +``` + +# 聊天机器人 + +```javascript + + + + + + + + 聊天机器人 + + + + + + + + + + + + + + + + + + + +
+ +
+ 9:41 +
+ + + +
+
+ +
+ + 使劲夸夸 +
+ +
+ +
+ +
+ +
+
+ +
+ +
+ +
+ +
+
+
+ + + + + +``` \ No newline at end of file -- Gitee