axios学习笔记

最新推荐文章于 2021-08-06 04:52:50 发布
最新推荐文章于 2021-08-06 04:52:50 发布
阅读量297 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_43003949/article/details/108826868
版权

promise对象

  • 主要解决异步深层嵌套的问题
  • promise 提供了简洁的API 使得异步操作更加容易
 
  <script type="text/javascript">
    /*
     1. Promise基本使用
           我们使用new来构建一个Promise  Promise的构造函数接收一个参数，是函数，并且传入两个参数：		   resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
    */


    var p = new Promise(function(resolve, reject){
      //2. 这里用于实现异步任务  setTimeout
      setTimeout(function(){
        var flag = false;
        if(flag) {
          //3. 正常情况
          resolve('hello');
        }else{
          //4. 异常情况
          reject('出错了');
        }
      }, 100);
    });
    //  5 Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数 
    //  在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了  
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });
  </script>

基于Promise发送Ajax请求

 
  <script type="text/javascript">
    /*
      基于Promise发送Ajax请求
    */
    function queryData(url) {
     #   1.1 创建一个Promise实例
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            # 1.2 处理正常的情况
            resolve(xhr.responseText);
          }else{
            # 1.3 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
	# 注意：  这里需要开启一个服务 
    # 在then方法中，你也可以直接return数据而不是Promise对象，在后面的then中就可以接收到数据了
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        #  1.4 想要继续链式编程下去 需要 return  
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });
  </script>

Promise 基本API

实例方法
.then()
  • 得到异步任务正确的结果
.catch()
  • 获取异常信息
.finally()
  • 成功与否都会执行（不是正式标准）
  
  <script type="text/javascript">
    /*
      Promise常用API-实例方法
    */
    // console.dir(Promise);
    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          // resolve(123);
          reject('error');
        }, 100);
      })
    }
    // foo()
    //   .then(function(data){
    //     console.log(data)
    //   })
    //   .catch(function(data){
    //     console.log(data)
    //   })
    //   .finally(function(){
    //     console.log('finished')
    //   });

    // --------------------------
    // 两种写法是等效的
    foo()
      .then(function(data){
        # 得到异步任务正确的结果
        console.log(data)
      },function(data){
        # 获取异常信息
        console.log(data)
      })
      # 成功与否都会执行（不是正式标准） 
      .finally(function(){
        console.log('finished')
      });
  </script>
静态方法
.all()
  • Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定
.race()
  • Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

​

  <script type="text/javascript">
    /*
      Promise常用API-对象方法
    */
    // console.dir(Promise)
    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {
            // 处理正常的情况
            resolve(xhr.responseText);
          }else{
            // 处理异常情况
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
     Promise.all([p1,p2,p3]).then(function(result){
       //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
       console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]
     })
    Promise.race([p1,p2,p3]).then(function(result){
      // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。
      console.log(result) // "HELLO TOM"
    })
  </script>

axios

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据

axios基础用法

  • get和 delete请求传递参数
    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数 (与post不同，需要在json中的param中的params中传递)
  • post 和 put 请求传递参数
    • 通过选项传递参数
    • 通过 URLSearchParams 传递参数 方便传递表单数据 因为默认传递的都是json格式
    # 1. 发送get 请求 无参数时
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })
	# 2.  get 请求  传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通过params  形式传递参数  一定要有params  用的多
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	#3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# 4  axios 的 post 请求
    # 4.1  通过选项传递参数  直接传递参数 不需要params
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	#5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	#6 执行多个并发请求  axios.all axios.spread
    axios.all([第一个请求所代表的函数 Fun1()，第二个请求所代表的函数 Fun2()]).then(axios.spread(acct,perms){
                                              //优点：两个请求都完成  才会执行
                                              //acct代表第一个请求返回的  perms代表第二个请求  想要取到结果 还是要acct.data perms.data
                                              })

在axios的回调函数then catch中，如果普通function写法this表示的是窗口，不是vue实例，then使用箭头函数的时候this会变成vue实例

axios 全局配置

#  配置公共的请求头  传递地址不写全的时候会自动加上baseurl
axios.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
axios.defaults.timeout = 2500;
#  配置公共的请求头  可以在实现登陆验证等方面用上  比如token
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type 默认是json
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


1.全局的 axios 默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
 
2.自定义实例默认值
// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.example.com'
});
 
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
 
3.配置的优先顺序
配置会以一个优先顺序进行合并。这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。
这里是一个例子：
 
// 使用由库提供的配置的默认值来创建实例
// 此时超时配置的默认值是 `0`
var instance = axios.create();
 
// 覆写库的超时默认值
// 现在，在超时前，所有请求都会等待 2.5 秒
instance.defaults.timeout = 2500;
 
// 为已知需要花费很长时间的请求覆写超时设置
instance.get('/longRequest', {
  timeout: 5000
});

在vue中引入

在vue中引入的写法

Vue.prototype.$http = axios
 this.$http.post({....})

$http是自己取得

引用 axios 时

Vue.prototype.axios = axios

Vue.prototype.$axios = axios

Vue.prototype.$http = axios

其实是都一个东西，只是vue的原型链上加个变量（且变量不同），值是axios对象 。

只是 一个是jquery封装过的异步调用方法 一个是vue推荐的第三方异步封装方法 他们都是调用的axios对象

只是调用的时候 axios.post({…}) this. a x i o s . p o s t ( . . . ) t h i s . axios.post({...}) this. axios.post(...)this.http.post({…})

vue中推荐写法

 Vue.prototype.$http = axios
 this.$http.post({....})

axios 拦截器

  • 请求拦截器
    • 请求拦截器的作用是在请求发送前进行一些操作
      • 例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易
  • 响应拦截器
    • 响应拦截器的作用是在接收到响应后进行一些操作
      • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页
	# 1. 请求拦截器 
	axios.interceptors.request.use(function(config) {
      console.log(config.url)
      # 1.1  任何请求都会经过这一步   在发送请求之前做些什么   	# 修改config  记得return
      config.headers.mytoken = 'nihao';
      # 1.2  这里一定要return   否则配置不成功  
      return config;
    }, function(err){
       #1.3 对请求错误做点什么    
      console.log(err)
    })
	#2. 响应拦截器 
    axios.interceptors.response.use(function(res) {
      #2.1  在接收响应做些什么 
      # 例如可以直接解析出来data
      var data = res.data;
      return data;
    }, function(err){
      #2.2 对响应错误做点什么  
      console.log(err)
    })

在请求或响应被 then 或 catch 处理前拦截它们。

分为请求拦截与响应拦截

axios.interceptors.request.use（fun(){}）

axios.interceptors.response.use（fun(){}）

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么 config就是你发送的报文  config.data就是你传递的参数
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });
 
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


1.如果你想在稍后移除拦截器，可以这样：
var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
2.可以为自定义 axios 实例添加拦截器
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

async 和 await

  • async作为一个关键字放到函数前面
    • 任何一个async函数都会隐式返回一个promise
  • await关键字只能在使用async定义的函数中使用
    • ​ await后面可以直接跟一个 Promise实例对象
    • ​ await函数不能单独使用
  • async/await 让异步代码看起来、表现起来更像同步代码
 	# 1.  async 基础用法
    # 1.1 async作为一个关键字放到函数前面
	async function queryData() {
      # 1.2 await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
	# 1.3 任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程
    queryData().then(function(data){
      console.log(data)
    })

	#2.  async    函数处理多个异步函数
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      # 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
      
      var info = await axios.get('async1');
      #2.2  让异步代码看起来、表现起来更像同步代码
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

请求配置

这些是创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。axios除了get等方法 也可以写作api格式 即 axios({})

以下是发送请求时的所有配置文件 根据自己的需求选择默认的还是加以修改

//config
 
{
  // `url` 是用于请求的服务器 URL   这个是必须要写的
  url: '/user',
 
  // `method` 是创建请求时使用的方法
  method: 'get', // 默认是 get
 
  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',
 
  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data) {
    // 对 data 进行任意转换处理
 
    return data;
  }],
 
  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
 
    return data;
  }],
 
  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},
 
  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },
 
  // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },
 
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },
 
  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,
 
  // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // 默认的
 
  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },
 
  // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },
 
  // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // 默认的
 
  // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default
 
  // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
 
  // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
 
  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },
 
  // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,
 
  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; 
      // 默认的
  },
  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // 默认的
  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),
  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: : {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },
  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

响应结构

某个请求的响应包含以下信息

{
  // `data` 由服务器提供的响应
  data: {},
 
  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,
 
  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',
 
  // `headers` 服务器响应的头
  headers: {},
 
  // `config` 是为请求提供的配置信息
  config: {}
}

自定义创建实例

var instance = axios.create({
  ####
});

跨域处理

开发环境解决跨域 vue2版本

用自己的本地服务器

跨域方法：

首先将这次要用到的/api存储下来 单独使用一个变量来存储

this.prototype.$host='/api'

配置代理修改config文件夹下的index.js文件，在proxyTable中加上如下代码：

'/api':{
    target: "https://www.wd.com/dev",
    // 是否允许跨域
    changeOrigin:true,
    pathRewrite:{
    	// 路径是否要重写
        '^/api':''
    }
}

修改url请求

this.$axios
     .get(this.$host+"/unit/queryTree")
     .then(res => {
        console.log(res.data);
     })
     .catch(err => {
        console.log(err);
 });

所以最后访问的是 https://www.wd.com/dev/unit/queryTree 其中api是我们自己定义的名称 用于区分不同的跨域

在 index.js 中的 proxyTable 中拦截了 /api ,并把 /api 及其前面的所有替换成了 target 中的内容，因此实际访问 Url 是https://www.wd.com/dev/unit/queryTree。

也就是target会自动替换掉/api中前面的内容

跨域示例代码

假如要访问 www.baidu.com/tieba/abc

  1. 给这次跨域起个代号 aaa

  2. 将aaa存储到一个地方方便使用

this.prototype.$host='/aaa'

  1. 配置代理修改config文件夹下的index.js文件，在proxyTable中加上如下代码：

    '/aaa':{
    target: "https://www.baidu.com/",
    // 是否允许跨域
    changeOrigin:true,
    pathRewrite:{
    	// 路径是否要重写
        '^/api':''
    }
}

  2. 修改url请求并发送

    this.$axios
     .get(this.$host+"/tieba/abc")
     .then(res => {
        console.log(res.data);
     })
     .catch(err => {
        console.log(err);
 });
在vue3版本解决跨域

具体思路与前面一致，不过在vue3中存放配置的 config 文件夹没有了，大家不要慌张。可以在 package.json 文件的同级目录下创建 vue.config.js 文件。给出该文件的基础配置：

module.exports = {
    outputDir: 'dist',   //build输出目录
    assetsDir: 'assets', //静态资源目录（js, css, img）
    lintOnSave: false, //是否开启eslint
    devServer: {
        open: true, //是否自动弹出浏览器页面
        host: "localhost", 
        port: '8080', 
        https: false,   //是否使用https协议
        hotOnly: false, //是否开启热更新
        proxy: null,
    }
}

修改 vue.config.js 中 devServer 子节点内容，添加一个 proxy：

与vue2一致

错误处理

axios.get('/user/12345')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else {
      // Something happened in setting up the request that triggered an Error
      console.log('Error', error.message);
    }
    console.log(error.config);
  });
可以使用 validateStatus 配置选项定义一个自定义 HTTP 状态码的错误范围。
axios.get('/user/12345', {
  validateStatus: function (status) {
    return status < 500; // 状态码在大于或等于500时才会 reject
  }
})

封装网络请求

  1. 使用axios.create({})来创建一个实例，并且自定义配置，基础配置见请求配置，例如
#  配置公共的请求头  传递地址不写全的时候会自动加上baseurl
实例名.defaults.baseURL = 'https://api.example.com';
#  配置 超时时间
实例名.defaults.timeout = 2500;
#  配置公共的请求头  可以在实现登陆验证等方面用上
实例名.defaults.headers.common['Authorization'] = AUTH_TOKEN;
# 配置公共的 post 的 Content-Type 默认是json
实例名.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  1. 配置实例的请求拦截与响应拦截，与全局配置相比就是 axios变成我们这次实例的名字 推荐使用箭头函数
  2. 最好在拦截器当中对于错误要进行单独处理，声明一个错误信息处理函数，例如对于不同的状态码来进行不同的输出 例如 400 服务器请求次数的限制 401 用户信息验证失败 403对方服务器限制访问
监听ajax请求,JavaScript监听全部ajax请求的事件
weixin_30453491的博客
08-05 2696
最近在做一个项目，其中需要监听页面中不可控代码调用 ajax 请求的事件，比如说监听调用 XHR 后的 onreadystatechange、onload、onloadstart 等事件。嗯，主要是用原生的 JavaScript 实现。查了挺多资料的，大概的做法是：1、Pub/Sub，也就是 https://github.com/cowboy/jquery-tiny-pubsub 这个 jQuer...
AJAX---addEventListener()方法
qq_52460205的博客
07-29 572
代码】AJAX---addEventListener()方法。
【转】分享JavaScript监听全部Ajax请求事件的方法
weixin_30940783的博客
01-07 751
若Ajax请求是由jQuery的$.ajax发起的，默认情况下可以使用 jQuery的Global Ajax Event Handlers监听到Ajax事件，然而我遇到的却是用原生JavaScript发起的Ajax请求，所以这种方法行不通。 然后呢，还有其他方法，比如说 Pub/Sub，但是这个发起请求的 js 代码我是无法改动的，也就不存在向代码里添加 publish 的问题。同理，jQuer...
ajax请求404_AJAX相关使用案例
weixin_39955825的博客
11-27 444
AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种是一种用于创建快速动态网页的技术。使用步骤 : 【1】创建AJAX引擎var xhr = new XMLHttpRequest();【2】创建HTTP请求 xhr.open(method, url, async, username, password) //第一个参...
AJAX监听
Reverie
04-11 287
jquery和js两种ajax监听使用   JQuery监听的使用方式：   &lt;script type="text/javascript"&gt; /*……省略AJAX方法……*/ $(document).ajaxSend( function(event,request,settings){ alert(settings.url); //输出请求地址 aler...
前端-axios学习笔记
07-14
前端-axios学习笔记
Axios学习笔记之使用方法教程
01-19
所以本文将详细介绍关于Axios使用方法的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍： Axios Github 功能特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 ...
axios学习笔记（一）：学习HTTP相关的技术知识点
01-08
... 2. 服务器接收到请求后...在后续的学习笔记中，我们将更深入地了解axios的使用，包括发送不同类型的HTTP请求，处理响应，以及如何利用axios进行更复杂的网络操作。通过这些知识，开发者能够更好地构建和维护Web应用。
addeventlistener不支持ajax_ajax
weixin_34610364的博客
12-09 197
一、ajax是异步的js和XML二、HRX接受与处理XML三、部署web项目四、ajax服务器准备五、开发web项目六、1、获取表单的数据2、将数据发送给服务器3、接收服务器返回的数据4、将返回的数据显示在页面上七图片的缓存问题给URL增加时间戳，不读取缓存var timestamp=(new Date()).valueOf();八、乱码问题1、页面发出的数据作一次encodeURI,服务端作一次...
分享JavaScript监听全部Ajax请求事件的方法
10-21
最近在做一个小项目，引入了第三方js文件，这个文件会调用XMLHttpRequest向服务器发送 Ajax请求，但是我有需要监听其Ajax请求的某些事件，以便额外地执行其他脚本。于是稍微看了看监听 Ajax请求的事件方法，在这里分享给大家。有需要的朋友们可以参考借鉴。
js监听页面请求
captAction的博客
11-27 5353
代码封装 //监听ajax请求 (function () { if ( typeof window.CustomEvent === "function" ) return false; function CustomEvent ( event, params ) { params = params || { bubbles: false, cancelable: false, detail: undefined }; var evt = document.c
对页面上所有ajax的请求进行监听
sk880609的专栏
08-17 9012
这段时间遇到个问题，就是需要对页面中的所有ajax请求进行监听，因为页面中涉及了很多的subapp,是不同人做的，我没有办法在他们那里进行监听，只能在一个大家都调用的文件里面写监听，我首先想到了jQuery的全局监听ajaxＣｏｍplete,ajaxSuccess,发现部分的ajax请求可以监听，然后其它的一些请求监听不了，全是用的公司自己写的tag，然后就奇怪，为什么都是ajax,我怎么就监听不
js监听ajax请求事件
qq_23064433的博客
01-01 2660
你可以用这个做很多事情，例如对要ajax的请求链接统一进行加密，统计，修改 也可以用于APP的混合开发中，在他人的网页中添加监听ajax的代码，从而获取他的ajax内容 (function(){ function ajaxEventTrigger(name) { var ajaxEvent = new CustomEvent(name, {detail: this });//创建一个事件 window.dispatchEvent(ajaxEvent);//触发/派发这个事件 } var old
addeventlistener监听ajax请求_13SpringBoot工程中ajax技术分析及应用
weixin_29080843的博客
01-09 227
作者：Jason来源：SegmentFault 思否社区Ajax 技术简介背景分析？在互联网高速发展的今天，传统的WEB应用，对于高并发、高性能、高可靠性的要求已迫在眉睫。单线程方式的客户端与服务端交互方式已经不能满足现阶段的需求.我们需要以异步、按需加载的方式从服务端获取数据并及时刷新，来提高用户体验，于是Ajax技术诞生。Ajax 是什么？Ajax (Asynchronous Jav...
http中的301、302、307、308有什么区别？
qq_42949209的博客
09-16 4772
原文来自https://www.cnblogs.com/wuguanglin/p/redirect.html 状态码的解释 301 Moved Permanently（永久移动） 被请求的资源已永久移动到新位置，并且将来任何对此资源的引用都应该使用本响应返回的若干个URI之一。如果可能，拥有链接编辑功能的客户端应当自动把请求的地址修改为从服务器反馈回来的地址。除非额外指定，否则这个响应也是可缓存的。新的永久性的URI应当在响应的Location域中返回。除非这是一个HEAD请求，否则响应的实体中应当包
ajax监听服务器,AJAX
weixin_39952074的博客
08-06 417
掌握 AJAX访问原理浏览器发送请求到服务器，服务器把处理结果响应到浏览器,如果是ajax引擎发送的请求，把响应结果交给ajax引擎进行处理创建ajax请求的代码是？ajax.open()发送ajax请求的代码是？ajax.send()声明ajax监听的代码ajax.onreadystatechange=function(){}ajax异步同步总结和ajax的get请求和ajax的post请求aj...
ajax怎么传file参数_基于h5的history改善ajax列表请求体验
weixin_39624864的博客
11-27 193
信息比较丰富的网站通常会以分页显示，在点“下一页”时，很多网站都采用了动态请求的方式，避免页面刷新。虽然大家都是ajax，但是从一些小的细节还是 可以区分优劣。一个小的细节是能否支持浏览器“后退”和“前进“键。本文讨论两种方法，让浏览器可以后退和前进，或者说让ajax就像重定向到新页面一样 拥有能够返回到上一页或者前进到下一页。数据实现分页显示，最简单的做法是在网址后面加多个page的当...
addEventListener() 方法，监听事件
boysky0015的博客
10-11 3263
addEventListener()方法，监听事件 你可以用removeEventListener() 来移除事件的监听。 语法： addEventListener(event,function,capture); event 必须，指定事件名 function 必须，指定要事件触发时执行的函数 useCapture 可选 布尔值 指定事件是否在捕捉或者冒泡阶段执行。 true：在捕获阶段执行...
Vue学习笔记(五): 使用axios进行前后端交互
"这篇VUE学习笔记主要介绍了如何在Vue项目中引入并使用axios库进行前后端数据交互。Axios是一个基于Promise的HTTP库，适用于浏览器和node.js环境。在Vue中，通常使用axios来处理HTTP请求，如GET和POST。笔记首先指导...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值