post、get、axios、fetch,请求方法整理

本文详细介绍了几种常见的HTTP请求方法,包括POST、GET、JSONP、使用Axios、Fetch及Promise封装的AJAX请求。每种方法都附带了具体的代码示例,帮助读者理解不同场景下如何选择和应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

post请求:
function post() {
  let http;
  if (window.XMLHttpRequest) {
    http = new XMLHttpRequest(); // ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  }
  else{
    http = new ActiveXObject("Microsoft.XMLHTTP"); // IE6, IE5 浏览器执行代码
  }
  var postData = {
    "mobile": 15626192509,
    "password": 12313
  };
  http.open("POST","地址",true);//连接到服务器
  http.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //设置头部信息
  http.send(postData);//发送数据
  http.onreadystatechange = function() { //响应服务器时所做的准备
    if (http.readyState == 4 && http.status == 200) { //响应成功
      var data = JSON.parse(http.responseText); //解析数据
      console.log(data);
    }
  }
}

post();
————————————————————————————————————————————————————————————
get请求:
function get(){
  var xmlhttp;
  if (window.XMLHttpRequest){
    // ?IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp = new XMLHttpRequest();
  }
  else{
    // IE6, IE5 浏览器执行代码
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
    var data = JSON.parse(xmlhttp.responseText);
  }
    }
  xmlhttp.open("GET","地址",true);
  xmlhttp.send();
}

get()
————————————————————————————————————————————————————————————
原生jsonp 方法:
var sc = document.createElement("script");
sc.type = "text/javascript";
document.body.appendChild(sc);
sc.src = "http://localhost/ajax2/jsonp.php?cb=myCallBack";

function myCallBack(data){
  console.log(data);
}
————————————————————————————————————————————————————————————
axios请求:
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});
————————————————————————————————————————————————————————————
fetch请求:
try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("Oops, error", e);
}
————————————————————————————————————————————————————————————
用promise封装ajax:
function getJSON (url) {
  return new Promise(function(resolve,reject){
    let http = null;
    try{
      http = new XMLHttpRequest()
    }
    catch(e){
      http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    http.open("get",url);
    http.onreadystatechange=function (){
      if (http.readyState === 4) {
        if (http.status === 200) {
          resolve(http.response);
        } else {
          reject(new Error(http.status));
        }
      }
    }
    http.send()
  })
}

getJSON("./ajax1.php").then(function(data){
  console.log(data);
},function(error){
  console.log(error);
})

 

### Vue3 中封装 Axios GETPOST 请求 #### 创建 `utils` 文件夹及其子文件 为了更好地管理和重用代码,在项目的根目录创建名为 `utils` 的文件夹,并在此文件夹内建立两个 JavaScript 文件:`requests.js` 和 `html.js`。主要工作将在 `requests.js` 完成。 #### 配置 Axios 实例和服务基础选项 在 `requests.js` 文件中,通过导入 Axios 库来初始化一个新的 Axios 实例,并为其设定基本参数如基地址 (`baseURL`) 及超时时间 (`timeout`): ```javascript import axios from 'axios'; const service = axios.create({ baseURL: 'http://localhost:3000', timeout: 10000, }); ``` 此部分定义了全局性的网络请求配置[^2]。 #### 设置请求与响应拦截器 接着在同一文件里添加请求和响应的拦截处理逻辑,这有助于统一管理错误提示或预处理请求/回复的数据结构: ```javascript // 请求前的操作 service.interceptors.request.use( config => { // 这里可以加入token验证等功能 return config; }, error => { return Promise.reject(error); } ); // 接收到响应后的操作 service.interceptors.response.use( response => { const res = response.data; // 对于成功的HTTP状态码做进一步判断 if (res.code && res.code !== 200) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 }); return Promise.reject(new Error(res.message || 'Error')); } else { return res; } }, error => { console.log('err' + error); // 输出服务器异常信息至控制台 return Promise.reject(error); } ); ``` 上述代码片段展示了如何利用拦截器增强 API 调用的安全性和用户体验。 #### 封装 GETPOST 方法 最后一步是在同一文件中实现具体的 HTTP 动词方法——这里以 GETPOST 为例展示其简单实现方式: ```javascript export function fetchGet(url, params={}) { return new Promise((resolve, reject) => { service.get(url, {params}) .then(response => resolve(response)) .catch(err => reject(err)); }) } export function fetchPost(url, data={}, headers={'Content-Type': 'application/json'}) { return new Promise((resolve, reject) => { service.post(url, data, {headers}) .then(response => resolve(response)) .catch(err => reject(err)); }) } ``` 这段代码提供了两种函数分别用于发起 GETPOST 类型的请求,同时也允许自定义头部信息以便适应不同场景下的需求[^4]。 #### 导出服务实例供外部调用 确保最终将构建好的 Axios 实例导出给其他模块使用: ```javascript export default service; ``` 现在可以在任何组件内部轻松地引入这些工具函数来进行高效的 HTTP 数据交互而无需重复编写相同的代码。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值