axios网络请求

秒速五厘米 2021-07-24 21:01 777阅读 0赞 
  1. axios网络请求
  2.     1、安装
  3.         cnpm install axios -S
  5.     2、在main.js中引入
  6.         import Axios from 'axios'
  8.     3、在main.js中将Axios挂载到Vue的原型上(可选)
  9.         Vue.prototype.$axios=Axios
  11.     4、axios配置
  12.         axios({
  13.             baseURL:'',   路径前缀,会将url的路径添加到后面
  14.             url:'',
  15.             method: 'get',  不写默认是 get
  16.             timeout:n毫秒,    请求超时时间,若超过则取消
  17.             transformRequest: [function (data, headers) { 允许在向服务器发送前,修改请求数据,只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  18.                 对data进行任意转换处理,必须返回一个字符串,或ArrayBuffer,或Stream
  19.                 return data;    
  20.             }],
  21.             transformResponse: [function (data) { 在传递给then/catch前,允许修改响应数据
  22.                    return data;
  23.             }],
  24.             headers: {'X-Requested-With': 'XMLHttpRequest'},    自定义请求头
  25.             params: {    会被添加到url中的请求参数
  26.                 ID: 12345
  27.             },
  28.             paramsSerializer: function(params) {    参数序列化,如get请求传递的参数是个数组且报错,就可以使用这个选项将其序列化
  29.               不配置该参数,数组会默认转换为类似ids[]=1&ids[]=2&ids[]=3
  30.               return qs.stringify(params, {arrayFormat: 'brackets'})    转换成类似ids[]=1&ids[]=2&ids[]=3
  31.               return qs.stringify(params, {indices: false)                转换成类似ids=1&ids=2&id=3
  32.               return qs.stringify(params, {arrayFormat: 'indices'})        转换成类似ids[0]=1&aids1]=2&ids[2]=3
  33.               return qs.stringify(params, {arrayFormat: 'repeat'})        转换成类似ids=1&ids=2&id=3
  35.             },
  36.             data:{作为请求主体被发送的数据,适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  37.                 键值对,会将请求体转换成json格式
  38.             },
  39.             data:'name=jeff&age=18',    会将请求体转换成url参数形式,即表单形式    
  40.             withCredentials: false,    跨域请求时是否需要使用凭证
  41.             adapter: function (config) {    请求适配器设置,如前台发送ajax、nodejs中发送http请求
  42.                 返回一个 promise 并应用一个有效的响应
  43.             },
  44.             auth: {    使用HTTP基础验证,并提供凭据这将设置一个`Authorization` 头,覆写掉现有的任意使用`headers`设置的自定义`Authorization`头
  45.               username: 'janedoe',
  46.               password: 's00pers3cret'
  47.             },
  48.             responseType: 'json',    服务器响应的数据类型,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  49.             responseEncoding: 'utf8',    表示解码响应时使用的编码
  51.             服务器返回结果时会返回唯一的标识,下次发送请求得传递标识,检测成功才会相应,避免响应其他客户端发送的请求
  52.                 xsrfCookieName: 'XSRF-TOKEN',    跨域请求cookie的标识
  53.                 xsrfHeaderName: 'X-XSRF-TOKEN',    跨域头信息设置
  55.             onUploadProgress: function (progressEvent) { 上传处理进度事件
  56.                 ...
  57.               },
  58.               onDownloadProgress: function (progressEvent) {    下载处理进度事件
  59.                   ...
  60.             },
  61.             maxContentLength: 2000,    允许的响应内容的最大尺寸
  62.             maxRedirects: 5,    定义在node.js中follow的最大重定向数目
  63.             validateStatus: function (status) {    定义对于给定的HTTP响应状态码是resolve或reject  promise,如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`),promise将被resolve; 否则,promise将被rejecte
  64.                 return status >= 200 && status < 300; // default
  65.             },
  66.             socketPath: null,    定义在node.js中使用的UNIX Socket的路径位置,如果使用了proxy代理,优先使用socketPath;
  67.             httpAgent: new http.Agent({ keepAlive: true }),`httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行http和https时使用的自定义代理,允许像这样配置选项：
  68.             httpsAgent: new https.Agent({ keepAlive: true }),
  70.            这将会设置一个`Proxy-Authorization`头,覆写掉已有的通过使用`header`设置的自定义 `Proxy-Authorization` 头。
  71.             proxy: {     'proxy' 定义代理服务器的主机名称和端口
  72.               host: '127.0.0.1',
  73.               port: 9000,
  74.               auth: {    `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  75.                username: 'mikeymike',
  76.                password: 'rapunz3l'
  77.              }
  78.             },
  79.             cancelToken: new CancelToken(function (cancel) {
  80.                 取消axios请求的配置
  81.             })
  82.         })
  85.     4.5、axios全局配置:
  86.         全局axios配置:
  87.             所有的请求都会生效
  88.             axios.defaults.属性='xxxx'
  90.         自定义实例配置:
  91.             const instance = axios.create({
  92.               baseURL: 'https://api.example.com'
  93.             });
  94.             instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  98.     5、axios实例
  99.         可用于创建不同域名的请求
  100.         const instance=axios.create({
  101.             配置
  102.         })
  103.         使用: 使用方式和axios的两种方式相同
  104.         instance({url:'',...}).then((res)=>{...})
  105.         instance.get('url',{...}).then(res=>{...})        
  107.     6、在组件函数中使用
  108.         (1)get请求:
  110.              axios.get("url",{配置})
  111.             .then(res=>{ res.data获取数据})
  112.             .catch(err=>{console.log(err)})//错误捕捉
  114.         (2)get请求传参:
  115.             方式一:在url后拼接参数
  116.             方式二:
  117.                 axios.get('url',{params:{
  118.                     键值对
  119.                 }
  120.                 }).then(res=>res.data)
  121.                 .catch(err=>console.log(err))
  123.                 axios({
  124.                     method:'get',
  125.                     url:'x',
  126.                     params:{
  127.                         键值对
  128.                     }
  129.                 }).then(res=>res.data)
  131.         (3)post请求
  133.             1、若被拦截,引入qs
  134.                 import qs from 'qs'  将post的参数转换成url?键值对的形式,否则会被拦截
  135.                 因为post中的键值对会以对象形式添加
  137.             2、创建请求
  138.                axios.post(url,data参数,{配置})
  139.                axios.post('url',qs.stringify({
  140.                     键值对
  141.                }),{配置}).then(res=>{res.data}).catch(err=>console.log(err))
  142.                或
  143.                axios({
  144.                        method:'post',
  145.                        url:'x',
  146.                        data:{...}或字符串格式
  147.                })
  149.         (4)当后台返回了状态码时
  150.             axios.get('url').then(
  151.                 ()=>{},
  152.                 ({response})=>{response.data}  获取错误情况下数据
  153.             )
  155.         (5)并行请求
  156.             axios.all([axios请求1,axios请求2]).then((res)=>{
  157.                 数组
  158.                 res[0]/...
  159.             })
  161.             axios.all([axios请求1,axios请求2]).then(
  162.                 axios.spread((res1,res2)=>{
  163.                     ...
  164.                 })
  165.             )
  167.         (6)axios返回流式内容(前端axios无法使用,import引入的,后端axios才行)
  168.             (1)node_modules中找到axios
  169.             (2)将lib/adapters/http.js中的内容全选复制到lib/adapters/xhr.js
  171.                 axios({method:'get',url,responseType:'stream'}).then(res=>{
  172.                   res.data.pipe(fs.createWriteStream('C:/Users/10853/Desktop/'+title+".epub"))
  173.                 })
  174.                 案例:通过流读取下载电子书
  175.                 axios({method:'get',url,responseType:'stream'}).then(res=>{
  176.                   res.data.pipe(fs.createWriteStream('C:/Users/10853/Desktop/'+title+".epub"))
  177.                   res.data.on('end',function(){
  178.                     console.log('下载完毕');
  179.                   })
  180.                 })
  183.         (7)axios拦截器
  184.             拦截器中的两个方法参数和Promise的.then的方法参数效果相同
  185.             多个请求拦截器:后面的会先执行,因为两个方法参数是被unshift插入执行的集合中
  186.             多个响应拦截器:前面的会先执行,因为两个方法参数是被push进入执行的集合中
  188.             (1)添加请求拦截器
  189.                 axios.interceptors.request.use(function (config) {
  190.                     在发送请求之前做些什么,config为axios的配置对象
  191.                     config.headers.Authorization=token
  193.                     return config;
  194.                   }, function (error) {    会接收请求拦截器中抛出的错误
  195.                     对请求错误做些什么
  196.                     return Promise.reject(error);
  197.                   });
  199.             (2)添加响应拦截器
  200.                 axios.interceptors.response.use(function (response) {
  201.                     对响应数据做点什么,response为axios的返回结果对象
  202.                     return response;
  203.                   }, function (error) {
  204.                     对响应错误做点什么
  205.                     return Promise.reject(error);
  206.                   });
  208.         (8)取消请求
  209.             const CancelToken = axios.CancelToken;
  210.             const source = CancelToken.source();
  212.             axios.get('/rl', {
  213.               cancelToken: source.token 方式一:
  214.               cancelToken:new CancelToken((c)=>{
  215.                       变量=c;
  216.               })
  217.             }).catch(err=>{
  218.                   if (err.message == "interrupt") {
  219.                        console.log('已中断请求');
  220.                     return;
  221.                   }
  222.             })
  223.             方式一中断请求:source.cancel('interrupt');
  224.             方式二中断请求:变量('interrupt');
  226.         (9)多个请求只发送一次,利用取消请求的特性
  227.             将取消请求的函数赋值给一个变量,当数据返回时将变量修改为null,每次请求判断变量是否为null,不是则取消
  228.             const CancelToken = axios.CancelToken;
  229.             let cont=null;
  231.             if(cont!==null){
  232.                 cont();
  233.             }
  234.             axios.get('/rl', {
  235.               cancelToken: source.token 方式一:
  236.               cancelToken:new CancelToken((c)=>{
  237.                   cont=c;
  238.               })
  239.             }).then(()=>{
  240.                 cont=null;
  241.             })

代码示例；
main.js:

  1. import Vue from 'vue'
  2. import App from './App'
  3. import Axios from 'axios'
  5. Vue.config.productionTip = false
  7. Vue.prototype.$axios=Axios
  9. /* eslint-disable no-new */
  10. new Vue({ 
  11.   el: '#app',
  12.   data:{ foo:'hello foo'},
  13.   components: {  App },
  14.   template: '<App/>'
  15. })

组件:

  1. <template>
  3.     <div>
  5.     </div>
  6. </template>
  8. <script>
  9. import qs from 'qs'
  11. export default{ 
  12.     name:'d',
  13.     data()
  14.     { 
  15.         return{ 
  17.         }
  18.     },
  19.     mounted()
  20.     { 
  21.         this.$axios.get("http://localhost:3000/news")
  22.         .then(res=>{ 
  23.             console.log(res.data);
  24.         })
  25.         .catch(err=>{ 
  26.             console.log(err)
  27.         })
  29.         this.$axios.post("http://localhost:3000/movie",qs.stringify({ id:2})).then(res=>console.log(res.data)).catch(err=>console.log(err))
  30.     }
  33. }
  34. </script>
  35. <style lang="css">
  36. </style>

发表评论

表情：
评论列表 （有 0 条评论，777人围观）

还没有评论，来说两句吧...

相关阅读

    相关 axios网络请求

    > 人的一生就像一篇文章，只有经过多次精心修改，才能不断完善。 > 你好，我是梦阳辰，期待与你相遇！ 文章目录 01.概述 02.axios请求方式

    末蓝、末蓝、/ 0 赞/ 274 阅读