vue学习十八(axios)

最新推荐文章于 2023-10-01 22:01:41 发布

易辰_

最新推荐文章于 2023-10-01 22:01:41 发布

阅读量541

点赞数

分类专栏： React\Vue Vue

本文链接：https://blog.csdn.net/u013210620/article/details/83059278

版权

React\Vue 同时被 2 个专栏收录

19 篇文章

订阅专栏

Vue

18 篇文章

订阅专栏

文章目录

安装

通过npm install axios安装
或者直接用cdn <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get方法

我们来测试下get方法，这里我利用了cdn的方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
  <script src="https://unpkg.com/vuex@2.0.0"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

</body>
<script>
  axios.get('http://localhost:8080/pingg', {
    params: {
      name: "safly",
      sex:"nan"
    }
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    console.info("always executed")
  });  


</script>

</html>

浏览器输入file:///Users/zhiliao/zhiliao/vue/index_test.html
效果如下：
在这里插入图片描述
我们get请求，还可以用如下的方式来实现：

 axios.get('http://localhost:8080/pingg?name=12345&sex=nan')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    console.info("always executed")
  });

/想要使用异步/等待？将“asycc”关键字添加到外部函数/方法中。


async function getUser() {
  try {
    const response = await axios.get('http://localhost:8080/pingg?name=12345&sex=nan');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getUser()

post方法

官网的例子是：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

我用这个写法，我后端收不到，后来搜了网上，发现可以用如下解决方案：


var params = new URLSearchParams();
params.append('name', 'Fred');
params.append('sex', 'Flintstone');


axios.post('http://localhost:8080/pingp', params)
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

在这里插入图片描述

批量请求

我们还可以同时发起多个请求

function getUserAccount() {
  return axios.get('http://localhost:8080/pingg?name=12345&sex=nan');
}

function getUserPermissions() {
  return axios.get('http://localhost:8080/pingg1?name=23423&sex=ssfsfs');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    console.info(acct.data,perms.data)
  }));

浏览器输入file:///Users/zhiliao/zhiliao/vue/index_test.html
效果如下：
在这里插入图片描述

后端代码

后端代码是利用go框架gin来构造的

package main

import (
	"fmt"
	"github.com/gin-gonic/gin"
	"net/http"
	"strings"
)
func main() {
	r := gin.Default()
	r.Use(Cors())
	r.GET("/pingg", func(c *gin.Context) {
		name := c.Query("name")
		sex := c.Query("sex")

		fmt.Println("pingg name>>>",name,"sex>>>",sex)
		c.JSON(200, gin.H{
			"name": name,
			"sex":sex,
		})
	})

	r.GET("/pingg1", func(c *gin.Context) {
		name := c.Query("name")
		sex := c.Query("sex")

		fmt.Println("pingg1 name>>>",name,"sex>>>",sex)
		c.JSON(200, gin.H{
			"name": name,
			"sex":sex,
		})
	})



	r.POST("/pingp", func(c *gin.Context) {
		name := c.PostForm("name")
		sex := c.PostForm("sex")
		fmt.Println("name>>>",name,"sex>>>",sex)

		c.JSON(200, gin.H{
			"name": name,
			"sex":sex,
		})
	})


	r.Run()
}


func Cors() gin.HandlerFunc {
	return func(c *gin.Context) {
		method := c.Request.Method      //请求方法
		origin := c.Request.Header.Get("Origin")        //请求头部
		var headerKeys []string                             // 声明请求头keys
		for k, _ := range c.Request.Header {
			headerKeys = append(headerKeys, k)
		}
		headerStr := strings.Join(headerKeys, ", ")
		if headerStr != "" {
			headerStr = fmt.Sprintf("access-control-allow-origin, access-control-allow-headers, %s", headerStr)
		} else {
			headerStr = "access-control-allow-origin, access-control-allow-headers"
		}
		if origin != "" {
			c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
			c.Header("Access-Control-Allow-Origin", "*")        // 这是允许访问所有域
			c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")      //服务器支持的所有跨域请求的方法,为了避免浏览次请求的多次'预检'请求
			//  header的类型
			c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
			//              允许跨域设置                                                                                                      可以返回其他子段
			c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar")      // 跨域关键设置 让浏览器可以解析
			c.Header("Access-Control-Max-Age", "172800")        // 缓存请求信息 单位为秒
			c.Header("Access-Control-Allow-Credentials", "false")       //  跨域请求是否需要带cookie信息 默认设置为true
			c.Set("content-type", "application/json")       // 设置返回格式是json
		}

		//放行所有OPTIONS方法
		if method == "OPTIONS" {
			c.JSON(http.StatusOK, "Options Request!")
		}
		// 处理请求
		c.Next()        //  处理请求
	}
}