axios,json...总结

最新推荐文章于 2024-06-16 01:43:49 发布

star***

最新推荐文章于 2024-06-16 01:43:49 发布

阅读量651

点赞数

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/lidan724/article/details/104980300

版权

axios请求

首先安装axios,
方法一：npm install axios
方法二： CDN引入　　
get请求：

  //1.get请求(无参数)
    axios.get('http://www.xxx')
    .then(function(response){
        //请求成功
    }).catch(function(erroe){
        //请求失败
    });

//2.get请求(有参数)
      axios.get('http://www.xxx?a=1&b=2')
        .then(function(response){
            //请求成功
        }).catch(function(erroe){
            //请求失败
        });

post请求：
　//必须引入qs对data进行stringify 安装axios时已经安装了qs,无需再安装，引入即可用。

  // import Qs  from 'qs'  
     let data=Qs.stringify({a:1,b:2});
     axios.post('http://www.xxx',data)
     .then(function(response){
         //请求成功
     }).catch(function(error){
         //请求失败
     })
     //4.多个请求同时发送
     function axiosOne(){
      return axios.get('http://www.url.one')   
     };
     function axiosTwo(){
      return axios.get('http://www.url.two')   
     };
    axios.all([axiosOne(),axiosTwo()])
   .then(axios.spread(function(acct, perms){
        console.log(acct);//请求一的结果；
        console.log(perms);//请求二的结果
   }))

访问本地json文件的方法

情景：在一个js文件中访问该工程中的另一个本地json文件

这个问题本身很好解决，这里提供两个方法，先介绍一些可能会让初学者迷惑的知识点：

1.URL编码：利用一个百分号和16进制数字来对字符进行编码，JS提供了encodeURIComponent（）和decodeURIComponent（）方法来进行URL编码和解码

2.浏览器端的JavaScript发送HTTP请求所用的接口叫做XMLHttpRequest，当然这个接口跟XML并没有关系，之所以带XML前缀只是历史原因，实际上，JS中很多名称都因为历史原因而产生歧义。

3.URL分为绝对路径和相对路径，绝对路径顾名思义，没什么可解释，相对路径在书写时，需要注意：如果以斜杠"/"开头，则这个相对路径会替换当前路径中服务器后面的路径，如果不以斜杠开头，浏览器会会将相对路径添加到当前路径后，并在中间用斜杠分隔。

4.发送请求的时候，需要三步：

①创建一个XMLHttpRequest对象：var req = new XMLHttpRequest ();

②利用open方法设置请求头的一些信息，包括三个参数，第一个是请求方式（GET或者POST等），第二个为路径，第三个为true或者false（异步为true，同步为false）

③利用send方法发送请求体，如果是GET方法，则可以为null

5.同步和异步的区别

（1）在这种原生方法里，如果是同步，即open方法的第三个参数为false时，可以立即使用响应的结果，如使用获取的数据，但当网络连接状态不佳时，服务器很慢时，会耗费大量时间，并且这期间无法触发事件处理器，无法实现与用户的交互。为了避免这种情况，需要采用异步的方式

（2）如果是异步，为了检测什么时候请求执行完成，要添加load的监听事件，并判断一些响应状态

最终解决代码：说了这么多，其实也可以直接ajax请求

 function success(string){
			console.log(string)
		}
		function readFile(callback){
			var req = new XMLHttpRequest();
			req.open("GET","../test.json",true);
			req.addEventListener("load",function(){
				if( req.status<400 )
					callback("yes");
			})
			req.send(null);
			var js = JSON.parse( req.responseText );
			console.log(js.time);
			$("#div").text(js.time)
		}
		readFile(success)

//直接使用ajax访问
		$.ajax({
			type:'get',
			url:'../test.json',
			dataType:'json',
			success:function(data){
				console.log(data.time)
				$("#div").text(data.time)
			}
		})

jsonp

由于“同源策略”的限制，ajax不能做跨域请求，jsonp是当下解决跨域请求最流行的方案，来个例子：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Document</title>
    <script src="js/jquery.js"></script>
</head>
<body>
<input type="button" value="submit" id="submit">
<div id="txt"></div>
<script>
//监听对象
// document.getElementById(‘submit‘).onclick = function(){
// }
//简单的jsonpCallback封装
function jsonpCallback(data){//回调函数
  console.log(data);
}
var jsonp = document.createElement("script");//动态添加脚本
jsonp.type = "text/javascript";
jsonp.src="json.php?callback=jsonpCallback";
document.getElementsByTagName("head")[0].appendChild(jsonp);
</script>
</body>
</html>

代理模式（3种实现方法）

前言
代理模式也称为委托模式，属于结构型模式，其提供了对目标对象另外的访问方式（通过代理对象访问目标对象）。这样做的优点是可以在目标对象的基础上增加额外的功能操作，即轻松的扩展目标对象。代理模式的目标是为其他对象提供一种代理已达到对控制对象的访问。这样的例子很多，比如VPN其实就是用代理别人的ip访问一些本机ip访问不了的网站，亦或是经纪人和superSatr的关系，经纪人就是一个代理，而superStar则是被代理的对象，这样的例子很多也就不再一一赘述。

角色扮演
Subject：抽象主题类，该类就是一个接口，用于声明真是主题与代理的共同接口方法。
RealSubject：真实主题类，该类为被代理类，该类定义了代理所表示的真实对象，由其执行具体的业务方法，Client则通过代理类来间接地调用该类的方法。
ProxySubject：代理类，该类持有一个真实主题的引用，在其所实现的接口方法中调用真实主题的处理方法。起到代理的作用。
Client：调用者

适用模式
当无法或者不想直接访问某一个对象的时候，或者访问某个对象存在困难时，都可以使用代理模式。

代理模式的三种实现方法
代理模式的实现可以有简单的三种实现方法，静态代理、动态代理、Cglib代理，我们简单抽象一个过程，明星拍电影有四个步骤，分别是面谈、签合同、拍电影、结账，其中明星自己只需要拍电影，其他的事，当然经纪人去干，那么我们分别用三种方式实现这个过程。

静态代理
首先是Subject类，这里面把之前提的过程抽象为方法：

package com.demo.proxy.staticproxy;

/**
 * Created by italkbb on 2017/12/29.
 */

public interface Subject {
    // 面谈合作
    void talk();
    // 签订合同
    void contract();
    // 拍片
    void film();
    // 收钱
    void checkout();

其次我们需要明星，也就是RealSubject：

package com.demo.proxy.staticproxy;

import android.util.Log;

/**
 * Created by italkbb on 2017/12/29.
 */

public class SuperStar implements Subject {
    public final String CLASSNAME = SuperStar.class.getSimpleName();
    @Override
    public void talk() {
        Log.v(CLASSNAME,"明星委托经纪人面谈");
    }

    @Override
    public void contract() {
        Log.v(CLASSNAME,"明星委托经纪人签合同");
    }

    @Override
    public void film() {
        Log.v(CLASSNAME,"电影我还是自己拍，不然有点过不去呀");
    }

    @Override
    public void checkout() {
        Log.v(CLASSNAME,"经纪人你自己收钱吧");
    }
}

其次是经纪人，也就是ProxySubject类：

package com.demo.proxy.staticproxy;

import android.util.Log;

/**
 * Created by italkbb on 2017/12/29.
 */

public class Agent implements Subject {
    public final String CLASSNAME = Agent.class.getSimpleName();
    private Subject superStar;

    public Agent(Subject subject){
        this.superStar = subject;
    }
    @Override
    public void talk() {
        Log.v(CLASSNAME,"我去谈");
    }

    @Override
    public void contract() {
        Log.v(CLASSNAME,"我去签");
    }

    @Override
    public void film() {
        // 你专心拍电影
        superStar.film();
    }

    @Override
    public void checkout() {
        Log.v(CLASSNAME,"我去收尾款");
    }
}

那么使用上也就很简单（Client）：

// 模拟一个拍电影的过程
  SuperStar superStar = new SuperStar();
    Agent agent = new Agent(superStar);
  // 过程都调用agent
    agent.talk();
    agent.contract();
    agent.film();
    agent.checkout();


静态代理很简单，抽象主题，代理主题去做具体的操作就完事，简单明了。

star***

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
axios,json...总结

axios请求首先安装axios,方法一：npm install axios方法二： CDN引入　　get请求： //1.get请求(无参数) axios.get('http://www.xxx') .then(function(response){ //请求成功 }).catch(function(erroe){ //请求失败...
复制链接

扫一扫